Question

使用Angular（"angular": "~1.4.3"），我有一个重复列表，我想使用文本框添加项目并使用文本框内联编辑项目名称。

当我向阵列添加多个新项目时会出现问题。当我在一个文本中更改文本时，它会影响另一个文本。我为订单项1键入了Hello，然后将H推送到订单项2，其余的推送到1：

这是我添加新对象的方法（使用unshift将其强制列入列表顶部）：

   $scope.addObj = function () {
        $scope.new_categories.unshift({
            category : '',
            other data...
        });
    };

HTML：

<tr ng-repeat="c in new_categories | orderBy:sortType:sortReverse | filter:searchCategories track by $index" class="newly-added">
    <td class="third-width-input">
        <input type="text" name="category" placeholder="New Category" class="form-control" ng-blur="" ng-model="c.category">
    </td>
</tr>

编辑：建议，使用答案中建议的$index将更改对象的结构。

PLUNKER

按照我原来的方式绑定模型，c.category_name维护：

{
   //This is a Category Object
    category_name: 'some string',
    other data on the category obj
}

但使用c.category_name[$index]更改了它：

{
   //This is a Category Object
   category_name: Object { 0 : 'some string' },
   other data on the category obj
}

HTML：

<tr ng-repeat="c in new_categories | orderBy:sortType:sortReverse | filter:searchCategories track by $index" class="newly-added">
    <td class="third-width-input">
        <input type="text" name="category" placeholder="New Category" class="form-control" ng-blur="" ng-model="c.category[$index]">
    </td>
    <button ng-class="{ 'button-error' : !c.category[$index].length }" type="button" ng-click="saveAddedCategory( c ); c.saving = true; c.updated = false" class="buttons green inline" ng-disabled="!c.category[$index].length">
        Save
    </button>
</tr>

JS：

    $scope.saveAddedCategory = function(category) {
        console.log('cat', category);
    };

Console.log产生：

Answer 1

您对所有输入使用相同的ngModel。你应该把它改成：

<input type="text"
  ng-model="c.category[$index]"
  name="category"
  placeholder="New Category"
  class="form-control"
  ng-blur="">

所以你可以拥有这个：

<tr ng-repeat="c in new_categories | orderBy:sortType:sortReverse | filter:searchCategories track by $index"
  class="newly-added">
  <td class="third-width-input">
    <input type="text"
      ng-model="c.category[$index]"
      name="category"
      placeholder="New Category"
      class="form-control"
      ng-blur="">
  </td>
</tr>

带内联文本编辑的ng-repeat会影响其他项目

1 个答案: