使用ng-repeat我正在创建一堆带有值的表单。对于每个表单,还有一个按钮,用新字段向该特定表单添加行。代码如下
HTML:
<div ng-repeat="cont in contacts">
<form ng-submit="newContact()">
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.cat"/>
<input type="text" class="xdTextBox" ng-model="cont.loc"/>
<button type="submit">Submit</button>
<a href ng-click="addFields()">Add</a>
</form>
</div>
使用Javascript:
$scope.contacts = [{ ac: '', auth: '', autname: ''}];
$scope.tasks = [];
$scope.addFields = function () {
$scope.contacts.push({ ac: '', auth: '', autname: '' });
console.log($scope.contacts);
}
创建所有表单并添加行但是有两个问题。:
请让我知道如何修复它,以便在按下添加按钮时只创建该特定形式的行,当我在新推字段的字段中输入文本时,它只将它绑定到特定的字段而不是全部那些创造的。感谢
答案 0 :(得分:7)
也许我没有理解正确的问题,但我认为你需要的是一个多种联系形式的模型。
所以你需要嵌套的转发器:
<form name="{{form.name}}"
ng-repeat="form in forms">
<h2>{{form.name}}</h2>
<div ng-repeat="cont in form.contacts">
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.cat"/>
<input type="text" class="xdTextBox" ng-model="cont.loc"/>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
<hr>
</form>
模型看起来像这样:
app.controller('MainCtrl', function($scope) {
$scope.forms = [{
name: "form1",
contacts:[{ ac: '', auth: '', autname: ''}]
},{
name: "form2",
contacts:[{ ac: '', auth: '', autname: ''}]
},{
name: "form3",
contacts:[{ ac: '', auth: '', autname: ''}]
}];
$scope.addFields = function (form) {
form.contacts.push({ ac: '', auth: '', autname: '' });
};
$scope.submit = function(form){
console.log(form.contacts);
};
});
答案 1 :(得分:1)
您还可以使用this,只需在ng-repeat中添加autoextra
属性即可。将根据需要添加新条目。
答案 2 :(得分:0)
我不确定我也明白你想要做什么,但似乎有一些事情不太正确:
cont.cat
或cont.loc
,因此ng-models不会绑定任何内容。这样的事情怎么样?
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<div ng-repeat="cont in contacts">
<form ng-submit="newContact()">
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.cat"/>
<input type="text" class="xdTextBox" ng-model="cont.loc"/>
<input ng-if="cont.auth !== undefined" type="text" class="xdTextBox" ng-model="cont.auth"/>
<input ng-if="cont.autname !== undefined" type="text" class="xdTextBox" ng-model="cont.autname"/>
<button type="submit">Submit</button>
<a href ng-click="addFields($index)">Add</a>
</form>
</div>
</div>
</div>
控制器的JS:
var myApp = angular.module("MyApp", []);
myApp.controller("MyCtrl", function($scope) {
// These were previously { ac: '', auth: '', autname: ''}, which is what it seems you actually want to add after clicking.
$scope.contacts = [{ ac: '', cat: '', loc: ''},{ ac: '', cat: '', loc: ''}];
console.log($scope.contacts);
$scope.tasks = [];
$scope.addFields = function ($index) {
$scope.contacts[$index] = angular.extend($scope.contacts[$index], { ac: '', auth: '', autname: '' });
console.log($scope.contacts);
console.log($index);
};
});
这是更新的小提琴:http://jsfiddle.net/j32SL/1/
答案 3 :(得分:0)
好吧想象一下,好像你只是将表单一次又一次地复制并粘贴到HTML中。模型名称不会更改,并且您每次都指的是第一个元素。您需要使用$ index将正确的表单与其数组或json中的相应索引绑定。