数组中的AngularJS ng-repeat重复项
[英]Angularjs ng-repeat duplicates in array
问题描述
我在ng-repeat中有一些输入：
How many ingredients? <input type = "number" placeholder="number of ingredients" ng-model="mealCtrl.numberIng">
<li ng-repeat="i in mealCtrl.getNumber(mealCtrl.numberIng) track by $index">
Name: <input type = "text" placeholder="nazwa składnika" ng-model="mealCtrl.ingredient[i].name">
Manufacturer: <input type = "text" placeholder="manufacturer of ingredient" ng-model="mealCtrl.ingredient[i].producer">
Weight: <input type = "number" placeholder="weight in grams" ng-model="mealCtrl.ingredient[i].weight">
Description: <input type = "text" placeholder="description" ng-model="mealCtrl.ingredient[i].description"><br />
</li>
这是我的控制器中的代码：
.controller('AddMealController', function(Meals, Meal) {
var vm = this;
vm.meal = new Meal();
vm.getNumber = function(num) {
return new Array(num);
}
vm.saveMeal = function() {
vm.meal.ingredients = [vm.ingredient[0], vm.ingredient[1], vm.ingredient[2], vm.ingredient[3], vm.ingredient[4], vm.ingredient[5]];
Meals.add(vm.meal);
vm.meal = new Meal();
}
})
但是vm.getNumber向我返回了一个具有正确大小的数组，但是所有值都相同，并且ng-repeat中的每个重复输入都具有相同的“ i”值。 如果我在进餐Ctrl.numberIng中选择3，则我希望“ i”值为0、1、2。 怎么做？？
2 个解决方案
解决方案1
0 2018-05-04 19:45:54
尝试创建一顿膳食，并在每顿饭内创建类似以下的食材：
meals = [
{
id: 1,
name:'a'
ingredients:[ { id:10,name:'aaa'},{id:11,name:'bbb'}]
},
{
id: 2,
name:'b'
ingredients:[ { id:12,name:'ccc'},{id:13,name:'ddd'}]
}
]
并尝试以下ng-repeat选项：
<li ng-repeat="meal in meals">
{{meal.name}}
<div ng-repeat="ingredient in meal.ingredients">
{{ingredient.name}}
</div>
</li>
解决方案2
0 已采纳 2018-05-04 21:54:51
我在途中解决了您的问题。 但希望也许会对您有帮助。 看例子
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.ingredients = [];
$scope.xxxxxxx =function(num) {
for(let i=0; i < num; i++){
$scope.ingredients.push({name:'',producer:'',weight:0,description:''})
}
}
});
的HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
How many ingredients?
<input type = "number" ng-change="xxxxxxx(numberIng)" placeholder="number of ingredients" ng-model="numberIng">{{numberIng}}
<li ng-repeat="x in ingredients">
Name: <input type = "text" placeholder="nazwa składnika" ng-model="x.name">
Manufacturer: <input type = "text" placeholder="manufacturer of ingredient" ng-model="x.producer">
Weight: <input type = "number" placeholder="weight in grams" ng-model="x.weight">
Description: <input type = "text" placeholder="description" ng-model="x.description"><br />
</li>
{{ingredients}}
</body>
</html>
AngularJS Ng-repeat和Duplicates
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.