Question

使用AngularJS的ng-repeat功能时，我遇到了一个范围问题。

请参阅plnkr

我有一系列对象＆＃39; boxCollection＆＃39;以及项目列表＆item 39Collection＆＃39;我在下拉列表中显示。

   $scope.boxCollection = [];

   $scope.itemCollection = 
      [
        {name: 'item1'},
        {name: 'item2'},
        {name: 'item3'}
      ];

现在我的观点是

<script type="text/ng-template" id="addBox.html">
      <div class="box-controls">
        <span class="glyphicon glyphicon-plus pull-left" ng-click="addBox()"></span>
        <span class="glyphicon glyphicon-minus pull-left" ng-class="{disable_div:boxCollection.length < 2} " ng-click="removeBox($index)"></span>
      </div>

      <div class="box-container">
        <div class="box-details">

          <div class="boxItem">
            <form class="form-horizontal">
              <div class="form-group">
                <label class="control-label col-md-3">Item</label>
                <div class="col-md-8">
                  <select class="form-control" ng-options="item.name for item in itemCollection" ng-model="boxCollection[$index].item" ng-disabled="false">
                    <option value=""> None </option>
                  </select>
                </div>
              </div>

              <div class=" form-group ">
                <label class="control-label col-md-3">Item Desc</label>
                <div class="col-md-8">
                  <input type="text " class="form-control " ng-model="boxCollection[$index].item.desc ">
                </div>
              </div>
            </form>
          </div>

        </div>
        <div class="clearfix "></div>
      </div>
    </script>

视图包含在带有id的脚本标记中，并使用ng-repeat进行调用。

我有一个功能可以在我的视图中添加一个box元素＆add;（＆＃39; addBox（）＆＃39;它在＆＃39; boxCollection＆＃39;中生成一个条目。数组和＆＃39; boxTmplList＆＃39;中的另一个条目阵列。＆＃39; boxTmplList＆＃39;负责显示观点。

现在，如果你选择让我们说＆＃39; item1＆＃39;从box1中的下拉列表中添加一个值并在输入字段中添加一个值，使用＆＃39; +＆＃39;在视图中添加另一个框。按钮并选择＆＃39; item1＆＃39;又在另一个例子中。它在输入字段2中显示输入字段1的值。

enter image description here

在进一步分析中，我发现Angular跟踪了具有类似项目的对象＆＃39;名称使用相同的$ hashkey。

我通过向对象添加另一个属性＆＃39; boxCollection [$ index] .itemDesc＆＃39;来使用解决方法。而不是＆＃39; boxCollection [$ index] .item.desc＆＃39;然后使用另一个函数修改对象，但我觉得这不是最有效的方法。

对此的任何见解将不胜感激。

Answer 1

您需要将ng-model="boxCollection[$index].item"更改为ng-model="boxCollection[$index].item.name"，例如as-

<select class="form-control" ng-options="item.name for item in itemCollection" ng-model="boxCollection[$index].item.name" ng-disabled="false">

Answer 2

Working Plnkr

将ng-model="boxCollection[$index].item.desc"更改为ng-model="itemCollection[$index].name"。

           <div class=" form-group ">
                <label class="control-label col-md-3">Item Desc</label>
                <div class="col-md-8">
                  <input type="text " class="form-control " ng-model="itemCollection[$index].name">
                </div>
           </div>

使用ng-repeat添加多个视图实例时的范围问题

2 个答案: