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

0

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

Изображение 174551

Проблемы возникают, когда я добавляю в массив несколько новых элементов. Когда я меняю текст на один, он влияет на другой. Я набрал Hello для позиции 1, и он нажал H на позицию 2, а остальное на 1:

Изображение 174551

Вот как я добавляю новые объекты (используя 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 модель, как я изначально, 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 производит:

Изображение 174551

  • 0
    пожалуйста, добавьте поршень или JS скрипку?
  • 0
    Что вызывает addObj?
Теги:

1 ответ

2
Лучший ответ

Вы используете тот же 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>
  • 1
    Я думал, что ng-model для свойства объекта предполагает другой индекс по умолчанию. Хорошо знать
  • 0
    Пожалуйста, см. Выше редактировать. Я получаю странные изменения при попытке сохранить объект категории
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню