AngularJS-使用ng-repeat根据数字打印输入
[英]AngularJS - Use ng-repeat to print inputs based off of a number
问题描述
AngularJS的新手，对如何使用ng-repeat有疑问。
目前，我只能找到您从服务中读取示例，然后ng-repeat遍历该示例。
我的情况是管理员可以为客人创建邀请并设置一个名为：
total_in_party = 4;
现在基于“ total_in_party”，我想为聚会中的每个客人提供3个输入字段
喜欢：
<div ng-repeat="guest in party">
<input type="text" ng-model="guest.first_name" />
<input type="text" ng-model="guest.last_name" />
<select ng-model="selectedGuestMeal" ng-options="meal.id as meal.name for meal in meals"></select>
</div>
在这种情况下，它应该将这3个输入字段打印4次。
我想我很亲密，如果我还没有存储任何数据，只需要知道如何创建party对象？
如果我这样做完全错误，请随时通知我！
3 个解决方案
解决方案1
3 2013-12-12 00:01:05
我最近不得不解决这个确切的问题。 本质上，您需要在范围内创建一个来宾对象数组，然后使用ng-repeat将数组绑定到表单。
在此处查看我的解决方案的工作演示： http : //plnkr.co/edit/2aYSLYe0IcRGXR7Lm0HR?p=preview
app.controller('MainCtrl', function($scope) {
$scope.numberOfGuests = 1;
$scope.guests = [];
addGuests($scope.numberOfGuests);
// When the number of guests changes, we want to repopulate the
// array of guest info (in a non-destructive manner).
$scope.$watch('numberOfGuests', function (newValue, oldValue) {
if (!newValue) {
return;
}
newValue = parseInt(newValue, 10);
oldValue = parseInt(oldValue, 10);
// If the number of guests increased, add some empty objects to the array.
if (!isNaN(oldValue) && newValue > oldValue) {
var numberOfGuests = newValue - oldValue;
addGuests(numberOfGuests);
} else {
// Otherwise reset length of array
$scope.guests.length = newValue;
}
});
function addGuests(numberToAdd) {
if (!isNaN(numberToAdd) && numberToAdd > 0) {
for (var i = 0; i < numberToAdd; i++) {
$scope.guests.push({});
}
}
}
});
这是视图
<body ng-controller="MainCtrl">
<form>
<p>Nunmber of Guests <input type="number" ng-model="numberOfGuests" ></p>
<table>
<tr ng-repeat="guest in guests track by $index">
<td>{{$index + 1}}</td>
<td><input type="text" ng-model="guest.name"></td>
<td><input type="text" ng-model="guest.email"></td>
</tr>
</table>
</form>
<pre>{{guests | json}}</pre>
</body>
解决方案2
1 2013-12-11 23:56:44
您可以在基于total_in_party的控制器中的$ scope上实例化guests total_in_party ；
function initGuests(totalInParty) {
$scope.guests = [];
for (var i = 0; i < totalInParty; i++) {
$scope.guests[i] = {
first_name: '',
last_name: '',
meal: ''
};
}
}
在ng-repeat使用$index ，如下所示：
<div ng-repeat="guest in guests">
<input type="text" ng-model="guests[$index].first_name" />
<input type="text" ng-model="guests[$index].last_name" />
<select ng-model="guests[$index].meal" ng-options="meal.id as meal.name for meal in meals"></select>
</div>
没有测试过，但应该可以工作:)
解决方案3
1 2013-12-12 00:02:20
您可以观看total_in_party号码并根据该号码添加/减去来宾
JS
$scope.$watch('total_in_party', function(newValue, oldValue) {
if (newValue != null) {
console.log(newValue, oldValue);
if (newValue > oldValue) { //add
var i = newValue - oldValue;
for (var k = 0; k < i; k++) {
$scope.party.push({
first_name: "",
last_name: "",
selectedGuestMeal: null
});
}
} else if (newValue < oldValue) { //subtract
var i = oldValue - newValue;
$scope.party.splice(0, i);
}
}
});
angularjs将输入保留在ng-repeat中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.