1. Requirements
When adding a page, implement a checkbox selection, and then when displayed on the details page, the previously selected one will be automatically selected.
2. Add a page
It is best for the viewer to copy this code to see the effect.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
choose
<div ng-repeat="item in list">
<input type="checkbox" name="tagName" value="" ng-click="select(,$event)"> {{}}
</div>
result：{{result}}
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
//Create checkbox for $=[{"id":1,"shortName":"Zhang San"},{"id":2,"shortName":"Li Si"},{"id":3,"shortName":"Wang Er"}];
//Storage is selected $ = [];
//Trigger event $ = function(id,event){
(event)//Print to see what this is, it is beneficial to understand (action)
var action = ;
if(){//Select, add if($(id) == -1){//If it does not exist, add it $(id);
}
}else{//Remove and delete the result var idx = $(id);
if( idx != -1){//If it does not exist, add it $(idx,1);
}
}
};
});
</script>
</body>
</html>
3. Detailed display
//Suppose the result of adding a page is: $ = [3,2];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
Settings are not optional during writeback，Set immediatelyng-disabled="true"
<div ng-repeat="item in list">
<input type="checkbox" name="tagName" ng-checked="isSelected()" value="" ng-disabled="true" > {{}}
</div>
result：{{result}}
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
//Create checkbox for $=[{"id":1,"shortName":"Zhang San"},{"id":2,"shortName":"Li Si"},{"id":3,"shortName":"Wang Er"}];
//The results obtained on the Add Page //You will find that the order will not affect the result. $ = [3,2];
//Selected condition: the result of ng-checked is true $ = function(id){
return $(id)!=-1;
//As long as the returned result is true, the corresponding checkbox will be selected. //So my idea is to see if the result of the storage and addition page contains the current id, that is, the value value. //If there is, return true; if there is no, return false };
});
</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.