Добавление элемента в модель и обновление второго нг-повтора

0

Во время работы над учебником телефона я задался вопросом, как реализовать этот прецедент

  1. браузер отображает список телефонов
  2. пользователь нажимает на add phone для одного из этих телефонов
  3. функция addItem запускается и добавляет этот телефон в массив телефоновInCart
  4. список с телефонами в корзине $scope.phonesInCart = []; обновляется

Моя демо-версия codepen имеет ту же логику, что и этот код

<body ng-controller="PhoneListCtrl">
<h3>Phones we sell</h3>
<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
    <b>{{phone.name}} </b>
    <button ng-click="addItem(phone)"
            ng-disabled="{{phone.orderReadonly}}">add phone</button>
  </li>
</ul>

<h3>Phones in your cart</h3>
<ul>
  <li ng-repeat="phoneInCart in phonesInCart"> 
    {{phoneInCart.name}}
  </li> 
</ul>
</body>

и соответствующий javascript

$scope.phonesInCart = [];
$scope.addItem = function(phone) { 
    // these lines have no effect on the ui
    phonesInCart.push(phone);
    $scope.$apply();
}

Текущее состояние

Отображается список, и функция 'addItem' запускается. В настоящее время список телефонов в корзине не обновляется/не отображается.

Мой вопрос

Могли бы вы объяснить

  • что нужно сделать, чтобы заполнить второй массив phonesInCart[] и обновить другой ng-repeat и
  • мне нужно создать/использовать более одного контроллера phonecatApp.controller('PhoneListCtrl'..., чтобы иметь secon ng-repeat?
Теги:
angularjs-ng-repeat

2 ответа

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

В вашем коде вместо phonesInCart.push(phone) вам нужно сделать:

$scope.phonesInCart.push(phone)

Поскольку это переменная, которую вы перебираете в свой html.

EDIT Поскольку вызов addItem происходит как часть директивы ng-click, вы можете избавиться от $scope.$apply. На самом деле, вы должны получить сообщение о том, что "текущий цикл обновления" находится в вашем текущем коде.

Поделиться
  • 0
    Я добавил вашу строку $scope.phonesInCart.push(phone) внутри $scope.addItem = function(phone) { ... и удалил `$ scope. $ Apply ();`, и похоже, что это работает: codepen.io/anon / ручка / PqyGXY
  • 0
    Большой! Обратите внимание, что все, что происходит в ответ на угловое действие, например обратный вызов ajax-запроса (при использовании $ http), или обработчик ng-click, или ng-mouseover и т. Д., Всегда выполняется внутри $ scope. $ применить (..), так что вам не нужно называть это самостоятельно. Если вы это сделаете, (и вы можете увидеть это в своей веб-консоли), вы увидите, что угловая ошибка выдается.
Показать ещё 1 комментарий
1

Я немного изменил код кода.

  • Во-первых, как уже указывали другие, вы пропустили $scope при нажатии в массив телефонов.
  • Во-вторых, если вы хотите добавить в список несколько одинаковых телефонов, вам нужно добавить track by $index в ваш ng-repeat, чтобы он принял "дубликаты".
  • У вас также была ненужная $scope.apply в вашей функции addPhone - вам не нужно обновлять ее вручную; когда вы нажимаете на массив переменных области, он запускает сам цикл дайджеста.
  • Наконец, вам не нужно $watch в watchmax-массив по той же причине, что и выше.

Здесь обновлено перо, в которое были внесены все эти изменения. Если у вас есть что-то еще, спросите, пожалуйста. :)

Поделиться
  • 0
    Я вижу <li ng-repeat="phoneInCart in phonesInCart track by $index"> потому что один и тот же телефон может быть добавлен несколько раз в массив phonesInCart . Мой предпочтительный вариант - увеличить количество определенного телефона.

Ещё вопросы

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