Во время работы над учебником телефона я задался вопросом, как реализовать этот прецедент
add phone
для одного из этих телефоновaddItem
запускается и добавляет этот телефон в массив телефоновInCart$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
? В вашем коде вместо phonesInCart.push(phone)
вам нужно сделать:
$scope.phonesInCart.push(phone)
Поскольку это переменная, которую вы перебираете в свой html.
EDIT Поскольку вызов addItem
происходит как часть директивы ng-click
, вы можете избавиться от $scope.$apply
. На самом деле, вы должны получить сообщение о том, что "текущий цикл обновления" находится в вашем текущем коде.
Я немного изменил код кода.
$scope
при нажатии в массив телефонов.track by $index
в ваш ng-repeat, чтобы он принял "дубликаты".$scope.apply
в вашей функции addPhone - вам не нужно обновлять ее вручную; когда вы нажимаете на массив переменных области, он запускает сам цикл дайджеста.$watch
в watchmax-массив по той же причине, что и выше.Здесь обновлено перо, в которое были внесены все эти изменения. Если у вас есть что-то еще, спросите, пожалуйста. :)
<li ng-repeat="phoneInCart in phonesInCart track by $index">
потому что один и тот же телефон может быть добавлен несколько раз в массив phonesInCart
. Мой предпочтительный вариант - увеличить количество определенного телефона.
$scope.phonesInCart.push(phone)
внутри$scope.addItem = function(phone) { ...
и удалил `$ scope. $ Apply ();`, и похоже, что это работает: codepen.io/anon / ручка / PqyGXY