Question

我在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”值。如果我在mealCtrl.numberIng中选择3，我希望“i”值为0,1,2。怎么做??

Answer 1

尝试在每餐中创建一系列膳食，以创建一系列成分：

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>

Answer 2

我在路上解决了你的问题。 but hope maybe it will help You. see example

<强> 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重复数组

2 个答案: