2016-03-15 5 views
0

обманывает (Использование AngularJS)AngularJS ngRepeat:

Я учусь AngularJS и пытающиеся простую систему оформления заказа. У меня 2 столбца, слева у меня есть предметы, а справа у меня есть корзина (корзина). По существу вы можете добавлять предметы слева, и они появляются в правой корзине.

Проблема заключается в том, что когда вы добавляете элемент в уже существующую корзину, я получаю ошибку ngRepeat: dupes в консоли. Я обработал функциональность, чтобы увеличить количество для этого, но это предотвращает показ каких-либо дополнительных предметов в корзине.

В идеале я хотел бы проигнорировать ошибку ng: repeat dupes и продолжить добавление элементов в корзину.

Вот фрагмент корзины;

<div ng:repeat='merchandise in merchandiseCtrl.basket' class='row'> 
    <div class='col-sm-3'>{{ merchandise.name }}</div> 
    <div class='col-sm-3'> 
     <input type='text' class='form-control input-sm' value='{{ merchandise.quantity }}' ng-model=' merchandise.quantity'> 
    </div> 
    <div class='col-sm-3'>{{ merchandise.price }}</div> 
    <div class='col-sm-3 '> 
     <button ng-click='merchandiseCtrl.removeItem(merchandise)' type='button' class='btn btn-link btn-xs'> 
     <span class='glyphicon glyphicon-trash'> </span> 
     </button> 
    </div> 
    <hr> 
</div> 

Если я не объясню, что мне нужно, или вам требуется больше кода, прокомментируйте.

Пример (Надеюсь очистить любое недоразумение):

Надеюсь, это более ясным. Скажите, что у вас уже есть рубашка в вашей тележке, и тогда вы хотели бы добавить еще одну рубашку (это отлично работает, и у меня есть функциональность, которая добавляет 1 к количеству), однако, эти ошибки ng: повторите повторы в окне консоли браузера. Затем, когда я присоединяюсь к корзине, содержимое в корзине не будет обновляться.

+1

Возможный дубликат http://stackoverflow.com/questions/16296670/angular-ng-repeat-error-duplicates-in-a-repeater-are-not-allowed – ste2425

+0

Я предполагаю, что ngRepeat должен быть 'ng-repeat' not 'ng: repeat' –

+0

@ojuskulkarni спасибо за это. Я исправил этот вопрос (по какой-то причине он работал без, но опять же, спасибо) – Jasper

ответ

1

Я не уверен, правильно ли я понял вашу проблему, но попытаюсь добавить «track by $ index» в ваш ng -repeat

+0

Не хочу звучать как задница, но ответы должны объяснять, почему тоже. в противном случае OP не является более мудрой относительно фактической проблемы. – ste2425

+0

К сожалению, вот некоторая документация: https://docs.angularjs.org/error/ngRepeat/dupes Дело в том, что я не был уверен, что правильно понял проблему со всем количеством вещей ... –

+0

I надеюсь, это более понятно. Скажите, что у вас уже есть рубашка в вашей тележке, и тогда вы хотели бы добавить еще одну рубашку (это отлично работает, и у меня есть функциональность, которая добавляет 1 к количеству), однако, эти ошибки ng: повторите повторы в окне консоли браузера. Затем, когда я присоединяюсь к корзине в корзину, содержимое корзины не будет обновляться. – Jasper

1

использование трэк $ индекса внутри нг-повторять как

<div ng-repeat="item in items track by $index"> 
+0

Не могли бы вы объяснить, что это делает, и что $ index ссылается или мне нужно ссылаться на поле на моей модели? – Jasper

+0

@CottonSocksBro Все 'ngRepeats' генерируют переменные, которые можно использовать внутри повтора. '$ index' - текущий индекс, который зацикливается. То, что делает «track by», - это в двух словах: «Не отслеживать это значение элемента, поскольку есть дубликаты, но этот индекс элементов». Его также можно использовать для отслеживания с помощью свойства elements, если итерация массива объектов. – ste2425

+0

У меня есть идентификатор на моей модели, например. товар в товареCtrl.basket track by merchandise.id ... но это не работает. – Jasper

0

Я получаю эту ошибку, когда был дубликатом $hashKey JSON объект.

Смежные вопросы