AngularJS manipulate two ng-repeat
Question
I'm calling two times the same list in my HTML5 view.
<div class="list" data-ng-repeat="item in model.items">
<div class=list-item">
{{ item.name }}
<a data-ng-click="addToList(item)">
<span data-ng-hide="item.checked">Add</span>
<span data-ng-show="item.checked">Remove</span>
</a>
</div>
</div>
<div class="checkbox-list" data-ng-repeat="item in model.items">
<div class=list-item">
<input type="checkbox" data-ng-checked="item.checked" data-ng-click="addToList(item)" />
{{ item.name }}
</div>
</div>
In my controller, I'm having the method defined in the scope:
function addToList(item) {
item.checked = !item.checked;
for (var i = 0; i < this.$scope.items.length; i++) {
if (this.$scope.items.id == item.id) {
this.$scope.items[i] = item;
break;
}
}
}
When I click the Add or Remove button, the list has an update, but the checkbox-list item doesn't get checked.
On the other hand, when checking a checkbox , the list doesn't get an update.
How can I make this happen?
3 answers
solution1
1 2016-12-29 09:03:07
Looks like you are using controller as syntax.
So in your js code add the model to the controller itself(assuming you yourController refers to the controller and you have your methods in the controller):
for (var i = 0; i < yourController.items.length; i++) {
if (yourController.items.id == item.id) {
yourController.items[i] = extension;
break;
}
}
Inside YourController declare:
var yourController = this;
Then in the HTML where you declare the controller, declare it as follows:
ng-controller = "YourController as yourController"
And then you can access the items in HTML as:
yourController.items
solution2
0 ACCPTED 2016-12-29 09:03:37
you are mixing the javascript function declaration syntax with angular
While working with angular you should always angular syntax to get the benefit of synchronization between the model and the view. $scope.addToList = function(){}
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.model = {}; $scope.model.items = [{"name":"one"},{"name":"two"}] $scope.addToList = function(item) { item.checked = !item.checked; } });
<html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <div class="list" data-ng-repeat="item in model.items"> <div class="list-item"> {{ item.name }} <a data-ng-click="addToList(item)"> <span data-ng-hide="item.checked">Add</span> <span data-ng-show="item.checked">Remove</span> </a> </div> </div> <div class="checkbox-list" data-ng-repeat="item in model.items"> <div class="list-item"> <input type="checkbox" data-ng-checked="item.checked" data-ng-click="addToList(item)" /> {{ item.name }} </div> </div> </body> </html>
solution3
0 2016-12-29 09:15:51
You are not using function with $scope. This might help:
$scope.addToList = function (item) {
item.checked = !item.checked;
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items.id == item.id) {
$scope.items[i] = extension;
break;
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.