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

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

请看

我有一个对象数组“boxCollection”和一个项目列表“itemCollection”，我在下拉列表中显示

   $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元素添加到视图“addBox（）”中。它在“boxCollection”数组中生成一个条目，在“boxTmplList”数组中生成另一个条目boxTmplList'负责显示视图

现在，如果您从框1中的下拉列表中选择“item1”并在输入字段中添加值，请使用“+”按钮在视图中添加另一个框，然后在另一个实例中再次选择“item1”。它在输入字段2中显示输入字段1的值

进一步分析后，我发现Angular使用相同的$hashkey跟踪具有类似“item”名称的对象

我正在使用一种变通方法，将另一个属性添加到对象“boxCollection[$index].itemDesc”而不是“boxCollection[$index].item.desc”，然后稍后使用另一个函数修改该对象，但我觉得这不是最有效的方法

---

如果您对此有任何了解，我们将不胜感激。

您需要将

ng model=“boxCollection[$index].item”

更改为

ng model=“boxCollection[$index].item.name”

，如下所示-

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

---

您需要将

ng model=“boxCollection[$index].item”

更改为

ng model=“boxCollection[$index].item.name”

，如下所示：

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

将

ng model=“boxCollection[$index].item.desc”

更改为

ng model=“itemCollection[$index].name”

项目说明

将

ng model=“boxCollection[$index].item.desc”

更改为

ng model=“itemCollection[$index].name”

项目说明

您想要什么？是否要停止更新新创建项中的输入值？@Khalid-是的，这正是我想要的。谢谢。你想要什么？是否要停止更新新创建项中的输入值？@Khalid-是的，这正是我想要的。谢谢。这对Khalid有效，但我想保留item对象。这对Khalid有效，但我想保留item对象。@rsingh100如果有效，请将其标记为answer。@rsingh100如果有效，请将其标记为answer。