javascript - 使用带有附加功能的 ng-model 获取值(value) - Javascript

标签 javascript jquery angularjs

按下 myform 中的添加按钮后,我想使用 ng-model 获取输入名称中的值。我在表单中使用追加来添加下一列。 但是,我在通过下面的代码实现此目的时遇到问题

function add(){
var stre;
stre="Name: <input type='text' ng-model='Name'><br>"
+"Result Name: <input type='text' value={{Name}}>"
$("#test").append(stre);
}
<!DOCTYPE html>
<html ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>

<div id="test">
<button type="button" onclick="add()">add</button><br>
</div>

</body>
</html>

最佳答案

Use ng-repeat instead of append

ngRepeat指令为集合中的每个项目实例化一次模板。每个模板实例都有自己的作用域,其中给定的循环变量设置为当前集合项。

var myApp = angular.module('myApp', []);
myApp.controller('myController', myController);

function myController($scope) {
  $scope.elements = [];
  $scope.add = function() {
    $scope.elements.push({});
  };

}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller='myController'>
    <div id="test">
      <div ng-repeat='elem in elements'>
        Name:
        <input type='text' ng-model='elem.name'>
        <br>Result Name:
        <input type='text' value={{elem.name}}>
        <hr>
      </div>
      <button type="button" ng-click="add()">add</button>
    </div>
  </div>
</div>

Fiddle here

关于javascript - 使用带有附加功能的 ng-model 获取值(value) - Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35596777/

相关文章:

Javascript 快速排序算法实现

jquery - 谷歌地图的标记未在 iframe 中居中

javascript - 可嵌套/可排序的序列化列表,无需从列表中删除原始项目

javascript - 使用 Angular 过滤器仅显示低于 10 英镑的商品

javascript - 允许用户在 Bootstrap 模式之外进行交互

javascript - 如何判断对象是使用 'Object.create' 还是使用文字语法/'new' 关键字创建的

javascript - Express (Node) - 通过中间件周期发送错误消息的正确方法

javascript - jQuery 显示 div 为空输入字段(验证)

angularjs - 为什么 ngModel.$setViewValue(...) 不起作用

javascript - 如何在javascript中计算从现在开始的时间?