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

时间:2015-04-24 03:09:56

标签: javascript angularjs angularjs-directive angularjs-scope

我试图做一个简单的例子,每次用户点击按钮时输入字段和按钮字段。

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

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

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

})

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

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

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

1 个答案:

答案 0 :(得分:13)

你可以做的是使用一个数组来表示输入然后遍历数组并像

一样呈现它
 <div class="addcontend">
   <div ng-repeat="item in inputs">
     <input ng-model="item.value"\> <button>get input value</button>
   </div>
  </div>

然后

  $scope.inputs = [];
  $scope.addfield=function(){
    $scope.inputs.push({})
  }

演示:CodePen