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

标签 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 实现这一目标?

最佳答案

您可以做的是使用一个数组来表示输入,然后循环遍历该数组并将其呈现为

<div class="addcontend">
  <div ng-repeat="item in inputs">
    <input ng-model="item.value"/> <button ng-click='addfield()'>get input value</button>
  </div>
</div>

然后

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

演示:CodePen

关于javascript - 如何在单击按钮时在angularjs中动态添加输入字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29838059/

相关文章:

angularjs - 将表单设置为原始状态时消除字段错误

html - 动态创建复选框列

javascript - 在 Angular 1.x 中,如何从自定义指令访问 Controller 方法?

javascript - 使用 yyyy-mm-dd 格式查找数组中的最小和最大日期

javascript - 新标签页上动态 URL 的 Chrome 扩展程序安全策略

javascript - Rails 4 ajax 在点击提交后不刷新

javascript - AngularJS 函数提升

javascript - 使用 css 更改时,在 clientWidth 上观察不触发

javascript - 带有指令和翻译的 Angular SweetAlert

javascript - 如何使 javascript 中的 setTimeout 为定义的函数工作?