Используя 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
предложенный в ответе, изменит структуру вашего объекта.
c.category_name
модель, как я изначально, 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 производит:
Вы используете тот же 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-model
для свойства объекта предполагает другой индекс по умолчанию. Хорошо знать