做表單的checkbox的時候一般有以下幾種情況：
只保存選中值：前臺只獲取選中的checkbox的值，然后傳遞給后臺
保存。只渲染：前臺調接口，從后臺獲取選中的checkbox的值，然后在前臺頁面上
渲染，設置用戶不可編輯。重渲染、二次編輯、重保存：前臺先從后臺獲取checkbox選中的值，然后
渲染到前臺，同時用戶可進行編輯，編輯完之后，傳遞用戶編輯后選中的checkbox的值給后臺保存。
現(xiàn)在碰到的就是用戶將表單填寫一半，點擊暫存，前臺將用戶填寫過的字段數(shù)據(jù)，傳遞給后臺，存儲到表里面，然后用戶換筆記本或重新打開瀏覽器，前臺掉接口，渲染未完成的表單，用戶繼續(xù)填寫未完成的表單。
簡單說就是第三種情況，保存--重渲染--二次編輯--更新保存
下面是個簡單的栗子：
- 一開始加載，
默認所有的checkbox都不選中。 - 掉接口，
模擬后臺返回的數(shù)據(jù)，判斷數(shù)據(jù)是否不為null、不為undefined、不為空字符串“”，然后字符串轉數(shù)組。 -
遍歷數(shù)據(jù)，將已選中的值，ifChecked設置為true。 - 每個checkbox添加
click事件，將選中的值，抓取出來。
<!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;
// 默認全不選
$scope.dataset=[{"name":"蘋果","ifChecked":false},
{"name":"香蕉","ifChecked":false},
{"name":"栗子","ifChecked":false},
{"name":"西瓜","ifChecked":false}];
// 調接口，重渲染checkbox，模擬后臺數(shù)據(jù)str
console.log("默認全不選的dataset------>"+JSON.stringify($scope.dataset));
var str = "香蕉,栗子";
// var str = null/undefined/"";
var arr1 = str? str.split(","): [];
console.log("接口假數(shù)據(jù)str------>"+JSON.stringify(str));
console.log("假數(shù)據(jù)轉數(shù)組arr1------>"+JSON.stringify(arr1));
// 將后臺返回的checkbox值選中
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("處理選中后的dataset------>"+JSON.stringify($scope.dataset));
// 觸發(fā)click事件，重編輯后重保存選中的checkbox值
$scope.selectCheck = function(){
// 每次click都要置空arr，否則它的值會有重復項
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("轉換成str，傳遞給后臺------>",self.arr.join(","));
}
});
</script>
</body>
</html>
重渲染如下：
重渲染，選中香蕉栗子
重編輯如下：
重編輯，獲取選中的值
注意： 如果使用ng-change的話，重編輯存在一個問題：
- 默認
選中的checkbox，重編輯，第一次不會觸發(fā)change事件，之后都能觸發(fā)。 -
未選中的checkbox，重編輯都可以觸發(fā)change事件。
第二種：只渲染，設置不可編輯
只渲染的話，可以使用ng-checked設置是否選中，ng-model也可以。
設置不可編輯的，設置disabled="disabled"屬性，或者ng-disabled='true'
然后添加css樣式，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":"蘋果","ifChecked":false},
{"name":"香蕉","ifChecked":true},
{"name":"栗子","ifChecked":false},
{"name":"火龍果","ifChecked":false},
{"name":"布林","ifChecked":true},
{"name":"哈密掛","ifChecked":false},
{"name":"西瓜","ifChecked":true}];
});
</script>
渲染，不可點擊
