做表单的checkbox的时候一般有以下几种情况：
只保存选中值：前台只获取选中的checkbox的值，然后传递给后台
保存。只渲染：前台调接口，从后台获取选中的checkbox的值，然后在前台页面上
渲染，设置用户不可编辑。重渲染、二次编辑、重保存：前台先从后台获取checkbox选中的值，然后
渲染到前台，同时用户可进行编辑，编辑完之后，传递用户编辑后选中的checkbox的值给后台保存。
现在碰到的就是用户将表单填写一半，点击暂存，前台将用户填写过的字段数据，传递给后台，存储到表里面，然后用户换笔记本或重新打开浏览器，前台掉接口，渲染未完成的表单，用户继续填写未完成的表单。
简单说就是第三种情况，保存--重渲染--二次编辑--更新保存
下面是个简单的栗子：
- 一开始加载，
默认所有的checkbox都不选中。 - 掉接口，
模拟后台返回的数据，判断数据是否不为null、不为undefined、不为空字符串“”，然后字符串转数组。 -
遍历数据，将已选中的值，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，模拟后台数据str
console.log("默认全不选的dataset------>"+JSON.stringify($scope.dataset));
var str = "香蕉,栗子";
// var str = null/undefined/"";
var arr1 = str? str.split(","): [];
console.log("接口假数据str------>"+JSON.stringify(str));
console.log("假数据转数组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));
// 触发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，重编辑，第一次不会触发change事件，之后都能触发。 -
未选中的checkbox，重编辑都可以触发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>
渲染，不可点击
