在项目开发中，有应用到单选、复选框，对于Angular来讲，其实有很多实现方法。如下应用实例：
一.AngularJS radio单选实例
在页面上有几个项目名称，每个名称前面都有一个checkbox，如果打上勾，则表示这个项目已经完成，如果没有打钩，则表示未完成。
然后在下方设置一个输入框，用来输入新增加项目的名称，再下边是两个radio按钮，只能选择一个，用来选择新增肌的项目的完成情况。最后是一个提交按钮，表示添加一个新的项目。
新增Name为Android，选择finished单选框，点击“Add a new item”按钮，就会出现在上面的列表中。
AngularJS单选多选
-
Name:
{{state}}
index01.js
//先预定义几个项目的名称和完成的状态。
var items = [
{name: 'Javascipt', finished: true},
{name: 'AngularJS', finished: true},
{name: 'NodeJS', finished: false},
{name: 'MongoDB', finished: false}
];
//注册一个模块
var todolistModule = angular.module('todolist', []);
//注册一个控制器
todolistModule.controller('TodolistController', ['$scope', function ($scope) {
//把外围的是对象数组的引用传递给模块作用域的数据模型items中
$scope.items = items;
//把输入框的内容初始化为空
$scope.name = '';
//给作用域添加函数方法
$scope.addItem = function () {
//因为将来要插入的都是对象，所以先定义一个空的对象
var newItem = {};
//分别把DOM中绑定的值赋给这个新定义对象的两个属性
newItem.name = $scope.name;
newItem.finished = $scope.state;
//在数组的末尾追加对象元素
items.push(newItem);
};
}]);
二.AngularJS判断checkbox/复选框是否选中并实时显示
做一个选择标签的功能，把一些标签展示给用户，用户选择自己喜欢的标签，就类似我们在购物网站看到的那种过滤标签似的，简单的效果如图所示：
index01.html
AngularJS单选多选按钮 Choose TagsYou have choosen:
{{ category.name }}{{ tag.name }}
{{selected|json}}{{selectedTags|json}}
，它存储了tag的id，name，利用isSelected(tag.id)来判断是否被checked，点击时候调用updateSelection($event,tag.id)方法；如果想 ng-click 触发的函数里获取到该触发该函数的元素不能直接传入this ，而需要传入 。因为在里面，这个地方的是event。因为在Angularjs里面，这个地方的this是scope 。我们可以传入 ，然后在函数里面通过event，然后在函数里面通过event.target 来获取到该元素。
index02.js
var iApp = angular.module("App", []);
iApp.controller('AddStyleCtrl', function($scope)
{
$scope.tagcategories = [
{
id: 1,
name: 'Color',
tags: [
{
id:1,
name:'color1'
},
{
id:2,
name:'color2'
},
{
id:3,
name:'color3'
},
{
id:4,
name:'color4'
},
]
},
{
id:2,
name:'Cat',
tags:[
{
id:5,
name:'cat1'
},
{
id:6,
name:'cat2'
},
]
},
{
id:3,
name:'Scenario',
tags:[
{
id:7,
name:'Home'
},
{
id:8,
name:'Work'
},
]
}
];
$scope.selected = [];
$scope.selectedTags = [];
var updateSelected = function(action,id,name){
if(action == 'add' && $scope.selected.indexOf(id) == -1){
$scope.selected.push(id);
$scope.selectedTags.push(name);
}
if(action == 'remove' && $scope.selected.indexOf(id)!=-1){
var idx = $scope.selected.indexOf(id);
$scope.selected.splice(idx,1);
$scope.selectedTags.splice(idx,1);
}
}
$scope.updateSelection = function($event, id){
var checkbox = $event.target;
var action = (checkbox.checked?'add':'remove');
updateSelected(action,id,checkbox.name);
}
$scope.isSelected = function(id){
return $scope.selected.indexOf(id)>=0;
}
});
updateSelection方法，这个方法会在html页面的checkbox被点击时调用，它通过$event变量来获取点击的dom元素，通过checkbox的当前状态来决定是add操作还是remove操作，然后调用updateSelected方法，更新数据。
而isSelected方法，用来判断ID为id的checkbox是否被选中，然后传值给页面的ng-checked指令。
不过，我总觉得这种实现方法，不太符合Angularjs以模型为中心的思想。
三.angularjs实现checkbox全选、反选
有个总的checkbox 负责全选和反选，当每一项开头都选中checkbox的时候，上面的全选自动选上；当全选后，取消其中一项的checkbox，全选取消。
AngularJS checded
- {{i.id}}
index03.js
var app = angular.module('myApp',[]);
app.controller('myController', ['$scope', function ($scope) {
$scope.list = [
{'id': 101},
{'id': 102},
{'id': 103},
{'id': 104},
{'id': 105},
{'id': 106},
{'id': 107}
];
$scope.checked = [];
$scope.selectAll = function () {
if($scope.select_all) {
$scope.checked = [];
angular.forEach($scope.list, function (i) {
i.checked = true;
$scope.checked.push(i.id);
})
}else {
angular.forEach($scope.list, function (i) {
i.checked = false;
$scope.checked = [];
})
}
console.log($scope.checked);
};
$scope.selectOne = function () {
angular.forEach($scope.list , function (i) {
var index = $scope.checked.indexOf(i.id);
if(i.checked && index === -1) {
$scope.checked.push(i.id);
} else if (!i.checked && index !== -1){
$scope.checked.splice(index, 1);
};
})
if ($scope.list.length === $scope.checked.length) {
$scope.select_all = true;
} else {
$scope.select_all = false;
}
console.log($scope.checked);
}
}]);
给数组里面每一个list 绑定checked 的属性。
四.利用ngValue
AngularJS checded
index04.js
angular.module('valueExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.names = ['pizza', 'unicorns', 'robots', 'jade'];
$scope.my = { favorite: 'unicorns' };
}]);
运行效果：
参考文章：
http://blog.csdn.net/lp_frank/article/details/44601283
http://www.cnblogs.com/CheeseZH/p/4517701.html
http://www.cnblogs.com/mayufo/p/5746788.html
https://code.angularjs.org/1.2.32/docs/api/ng/directive/ngValue
