动态添加新ng-model到angularJS

我有一个简单的表单，它有两个文本框，输入到框中的值使用angularJS显示在div中。我也有一个按钮，它使用jQuery为表单添加了两个文本框的新行，这也为他们提供了他们的ng模型。动态添加新ng-model到angularJS

但是，这些新的文本框不适用于将值分配给div。有没有一种方法可以动态地将更多的行添加到这个表中并让它们工作？

HTML：

<table> 
    <tr> 
     <td><input type="text" ng-model="value1a"></td> 
     <td><input type="text" ng-model="value1b"></td> 
    </tr> 
</table> 

<input type="button" value="Add Row" name="addRow"> 

<div> 
    <p>{{value1a}} {{value1b}}</p> 
</div>

的jQuery：

$(document).ready(function() { 
    var count = 2; 

    $('[name="addRow"]').click(function() { 
     $('.table tr:last').after('<tr></tr>'); 
     $('.table tr:last').append('<td><input type="text" ng-model="value' + count + 'a"></td>'); 
     $('.table tr:last').append('<td><input type="text" ng-model="value' + count + 'b"></td>'); 

     $('.div').append('<p>{{value' + count + 'a}} {{value' + count +'b}}</p>'); 

     count++; 
    }); 
});

我知道其中的原因可能是因为可以从页面加载，它的工作的开始需要，NG-模型，但我如何添加这样的新行？

来源

2017-08-02 Edward1442

尝试调用$ scope.apply（）;最后编译代码 –

Angular + jQuery = YURGH。使用Angular，或使用jQuery，而不是两者。 Angular在动态生成DOM，而jQuery操纵它，它们是完全不同的技术。通过混合使用这两种技术，您将创建笨拙，复杂且不可维护的代码，更不用说您必须加载两个库而不是一个。 –

这根本不是你如何做角度的事情。摆脱jQuery或摆脱角度。强烈建议阅读[“在AngularJS中思考”，如果我有一个jQuery背景？]（https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq= 1） – charlietfl

代替使用jQuery的，使用ng-repeat directive到如由模型定义添加行：

angular.module("app",[]) 
 
.controller("ctrl", function($scope) { 
 
    var vm = $scope; 
 
    vm.rowList = [{valueA: "itemA", valueB: "itemB"}]; 
 
    vm.addRow = function() { 
 
     vm.rowList.push({}); 
 
    }; 
 
})

<script src="//unpkg.com/angular/angular.js"></script> 
 
<body ng-app="app" ng-controller="ctrl"> 
 
    <table> 
 
    <tr ng-repeat="row in rowList"> 
 
     <td>{{$index}}</td> 
 
     <td><input type="text" ng-model="row.valueA"></td> 
 
     <td><input type="text" ng-model="row.valueB"></td> 
 
    </tr> 
 
    </table> 
 

 
    <input type="button" value="Add Row" name="addRow" 
 
     ng-click="addRow()"> 
 

 
    <div> 
 
    <p ng-repeat="row in rowList"> 
 
    row={{$index}} {{row.valueA}} {{row.valueB}} 
 
    </p> 
 
    </div> 
 
</body>

在上述例子中，是rowList对象的数组。每个对象都为每一行定义模型。要添加新行，addRow按钮使用ng-click directive来调用addRow函数，该函数将新对象推送到rowList阵列。

来源

2017-08-03 09:00:37 georgeawg

动态添加新ng-model到angularJS

回答

相关问题