ng-repeat с встроенным редактированием текста влияет на другие элементы

Question

Использование Angular ("angular": "~1.4.3") У меня есть ng-повторный список, который я бы хотел добавить и изменить имя элемента inline с помощью текстового поля.

Проблемы возникают, когда я добавляю больше, чем один новый элемент в массив. Когда я меняю текст на один, он влияет на другой. Я напечатал Hello для позиции 1 и она подтолкнула 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>