Javascript 存储动态添加的输入的$index值_Javascript_Angularjs_Forms_Angularjs Ng Repeat_Ng Repeat

Javascript 存储动态添加的输入的$index值

javascript angularjs forms

Javascript 存储动态添加的输入的$index值,javascript,angularjs,forms,angularjs-ng-repeat,ng-repeat,Javascript,Angularjs,Forms,Angularjs Ng Repeat,Ng Repeat,普朗克：我有一组表单元素，用户可以动态添加和删除这些元素。我想知道如何将每组对象的索引作为每个对象的“id”属性包含在内因此，对于每一组输入，我有： [{“选择”：““文本”：”}，{“选择”：““文本”：”}] 我该怎么做才能让它像 [{“选择”：“文本”：“Id”：“1”}，{“选择”：“文本”：“Id”：“2”}] 控制器： function DuplicateInputCtrl($scope) { $scope.foodTypes = [ {

普朗克：

我有一组表单元素，用户可以动态添加和删除这些元素。我想知道如何将每组对象的索引作为每个对象的“id”属性包含在内

因此，对于每一组输入，我有：

[{“选择”：““文本”：”}，{“选择”：““文本”：”}]

我该怎么做才能让它像

[{“选择”：“文本”：“Id”：“1”}，{“选择”：“文本”：“Id”：“2”}]

控制器：

 function DuplicateInputCtrl($scope) {
      $scope.foodTypes = [
        {
          "code" : "AP",
          "type" : "Apple"
        },
        {
          "code" : "CH",
          "type" : "Chicken"
        },
        {
          "code" : "GR",
          "type" : "Grape"
        }
      ]

      $scope.foods = [
        {
          "Selection": "",
          "Text": ""
        }
      ]

      $scope.cloneItem = function () {
        var itemToClone = { "Selection": "", "Text": "" };
        $scope.foods.push(itemToClone);
      }

      $scope.removeItem = function (item) {
        $scope.foods.splice(item, 1);
      }

      $scope.saveForm = function () {
        console.log($scope.foods);
      }

HTML:


食品{{$index+1}
挑选
删除
添加
拯救
{{foods | json}

使用

$watchCollection

很抱歉，我之前回答了关于

ng init

。我错了如果你有0,1,2,3，并且删除了2，那该怎么办呢。列表变为，0,1,3-添加新项目后，列表变为，0,1,3,3

 <body ng-controller="DuplicateInputCtrl" class="container">
  <div data-ng-repeat="food in foods">
  <div class="form-group title-field">
    <label for="">Food {{ $index + 1 }}</label>
    <select class="form-control input-full" data-ng-model="food.Selection"
        data-ng-options="foodType.code as foodType.type for foodType in foodTypes">
        <option value="">Select</option>
    </select>
    <input type="hidden">
    <button data-ng-click="removeItem($index)" class="btn delete-field-{{$index}}">
      Delete
    </button>
  </div>
  <div class="form-group">
      <textarea class="form-control" data-ng-model="food.Text"></textarea>
  </div>
</div>
<button data-ng-click="cloneItem()" class="btn inline">
  Add
</button>

<div>
  <button class="btn btn-medium" ng-click="saveForm()">Save</button>
</div>


{{ foods | json }}

</body>

  $scope.$watchCollection('foods', function() {
    angular.forEach($scope.foods, function(x, i) {
      x.id = i;
    });
  });