javascript – 如何在按钮单击时在angularjs中动态添加输入字段?

前端之家收集整理的这篇文章主要介绍了javascript – 如何在按钮单击时在angularjs中动态添加输入字段?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图做一个简单的例子,每次用户点击按钮时输入字段和按钮字段.

当单击与输入字段一起出现的新按钮时,如何获取输入字段的文本?

http://codepen.io/anon/pen/yNLGzx

  1. var app = angular.module('ionicApp',['ionic']);
  2. app.controller('cntr',function($scope){
  3. $scope.addfield=function(){
  4. alert("how to add input field dyanmically")
  5. }
  6.  
  7. })

我不知道该怎么做;在jQuery中我们可以使用append函数,就像这样

  1. $('.addcontend').append('<input \> <button>get input value</button>')

我如何使用angularjs实现这一目标?

解决方法

你可以做的是使用一个数组来表示输入然后循环遍历数组并渲染它
  1. <div class="addcontend">
  2. <div ng-repeat="item in inputs">
  3. <input ng-model="item.value"\> <button>get input value</button>
  4. </div>
  5. </div>

然后

  1. $scope.inputs = [];
  2. $scope.addfield=function(){
  3. $scope.inputs.push({})
  4. }

演示:CodePen

猜你在找的JavaScript相关文章