https://www.jianshu.com/p/89e17612e58d
When making a checkbox for a form, there are generally the following situations:
-
Save only the selected value: the foreground only obtains the value of the selected checkbox, and then passes it to the background for saving.
-
Rendering only: the foreground call interface obtains the value of the selected checkbox from the background, and then renders on the foreground page, setting that the user cannot edit.
-
Re render, re edit and re save: the foreground obtains the selected value of the checkbox from the background, and then renders it to the foreground. At the same time, the user can edit it. After editing, the value of the checkbox selected after editing is transferred to the background for saving.
Now what we encounter is that the user fills in half the form, clicks temporary storage, the foreground transfers the field data filled in by the user to the background, stores it in the form, then the user changes his notebook or reopens the browser, the foreground drops the interface, renders the unfinished form, and the user continues to fill in the unfinished form.
In the third case, save re render re edit update save
Here is a simple Chestnut:
- At the beginning of loading, all checkbox es are not selected by default.
- Drop the interface, simulate the data returned by the background, judge whether the data is not null, undefined, or empty string "", and then convert the string into an array.
- Traverse the data and set the selected value ifChecked to true.
- click event is added to each checkbox to grab the selected value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-checked</title>
<script type="text/javascript" src="../libs/angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<span style="display: inline-block;border: 1px solid #ccc;padding:10px" >
<label ng-repeat="item in dataset">
<input type="checkbox" name="preApp"
ng-model="item.ifChecked"
ng-click="selectCheck()">{{item.name}}
</label>
<!-- ng-checked="item.ifChecked" -->
</span>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
var self = this;
// None selected by default
$scope.dataset=[{"name":"Apple","ifChecked":false},
{"name":"Banana","ifChecked":false},
{"name":"Chestnut","ifChecked":false},
{"name":"watermelon","ifChecked":false}];
// Call interface, re render checkbox, simulate background data str
console.log("None selected by default dataset------>"+JSON.stringify($scope.dataset));
var str = "Banana,Chestnut";
// var str = null/undefined/"";
var arr1 = str? str.split(","): [];
console.log("False data of interface str------>"+JSON.stringify(str));
console.log("False data to array arr1------>"+JSON.stringify(arr1));
// Select the checkbox value returned in the background
for(var i = 0; i < arr1.length; i++){
for(var j = 0; j < $scope.dataset.length; j++){
if(arr1[i] == $scope.dataset[j].name){
$scope.dataset[j].ifChecked = true;
}
}
};
console.log("Process selected dataset------>"+JSON.stringify($scope.dataset));
// Trigger the click event, and save the selected checkbox value again after re editing.
$scope.selectCheck = function(){
// Every time you click, you need to leave arr blank, otherwise its value will have duplicates.
self.arr = [];
for(var i = 0; i < $scope.dataset.length; i++){
if($scope.dataset[i].ifChecked){
self.arr.push($scope.dataset[i].name);
}
}
console.log("convert to str，Pass to background------>",self.arr.join(","));
}
});
</script>
</body>
</html>
Re render as follows:
Re render, select banana chestnut
Re edit as follows:
Re edit to get the selected value
Note: if ng change is used, there is a problem with re editing:
- By default, the selected checkbox can be re edited. The change event will not be triggered for the first time, and can be triggered later.
- The change event can be triggered for unchecked checkbox es and re editing.
Second: rendering only, setting is not editable
For rendering only, you can use ng checked to set whether to select or not, or ng model.
Set the non editable, set the disabled="disabled" property, or ng disabled = true '
Then add css style, cursor: not allowed;
<div ng-app="myApp">
<div ng-controller="myCtrl">
ng-model/disabled: <span style="display: inline-block;border: 1px solid #ccc;padding:10px" >
<label ng-repeat="item in dataset" style="cursor:not-allowed;">
<input type="checkbox" name="preApp"
ng-model="item.ifChecked" disabled>{{item.name}}
</label>
</span>
<br>
<br>
ng-checked/ng-disabled: <span style="display: inline-block;border: 1px solid #ccc;padding:10px" >
<label ng-repeat="item in dataset" style="cursor:not-allowed;">
<input type="checkbox" name="preApp2"
ng-checked="item.ifChecked"
ng-disabled="true">{{item.name}}
</label>
</span>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.dataset=[{"name":"Apple","ifChecked":false},
{"name":"Banana","ifChecked":true},
{"name":"Chestnut","ifChecked":false},
{"name":"Pitaya","ifChecked":false},
{"name":"Brin","ifChecked":true},
{"name":"Hami hang","ifChecked":false},
{"name":"watermelon","ifChecked":true}];
});
</script>
Rendering, non clickable