在项目开发中，有应用到单选、复选框，对于Angular来讲，其实有很多实现方法。如下应用实例：
一.AngularJS radio单选实例
在页面上有几个项目名称，每个名称前面都有一个checkbox，如果打上勾，则表示这个项目已经完成，如果没有打钩，则表示未完成。
然后在下方设置一个输入框，用来输入新增加项目的名称，再下边是两个radio按钮，只能选择一个，用来选择新增肌的项目的完成情况。最后是一个提交按钮，表示添加一个新的项目。
新增Name为Android，选择finished单选框，点击“Add a new item”按钮，就会出现在上面的列表中。
<!DOCTYPE html>
<html ng-app="todolist">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS单选多选</title>
</head>
<body>
<div ng-controller="TodolistController">
<ul>
<!--循环遍历作用域下的items，即（$scope.items），并重复克隆这个HTML元素li-->
<li ng-repeat="item in items">
<!--当checkbox绑定的值为true时，页面中会打上对勾-->
<input type="checkbox" ng-model="item.finished"><span ng-bind="item.name"></span>
</li>
</ul>
<hr>
<!--绑定作用域对象的一个数据模型name，这个那么变量随时获取输入框输入的内容-->
Name:<input type="text" ng-model="name">
<p></p>
<label>
<!--
有两个radio标签，必须有相同的name才能实现二选一的效果
通过ng-value里不同的值，实现选择不同radio有不同值。然后两个radio又绑定着相同的数据模型，这样就可以实现当选择不同的radio时，绑定的数据模型变量会有不同的值。
-->
<input type="radio" ng-value=true ng-model="state" name="selectState">finished
</label>
<label>
<input type="radio" ng-value=false ng-model="state" name="selectState">unfinished
</label>
<!--这里是把这个数据模型显示出来，为了测试其值是否正确。可以省略掉-->
<p>{{state}}</p>
<!--当点击按后，执行一个函数-->
<button type="button" ng-click="addItem()">Add a new item</button>
</div>
<script src="jquery-1.8.3.js"></script>
<script src="angular1.2.9.js"></script>
<script src="index01.js"></script>
</body>
</html>
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/复选框是否选中并实时显示
做一个选择标签的功能，把一些标签展示给用户，用户选择自己喜欢的标签，就类似我们在购物网站看到的那种过滤标签似的，简单的效果如图所示：
扫描二维码关注公众号，回复：
262250 查看本文章
index01.html
<!DOCTYPE html>
<html data-ng-app="App">
<head>
<title>AngularJS单选多选按钮</title>
</head>
<body data-ng-controller="AddStyleCtrl">
<div>Choose Tags</div>
<div>
<div>You have choosen:</div>
<hr>
<label data-ng-repeat="selectedTag in selectedTags">
(({{selectedTag}}))
</label>
<hr>
<div data-ng-repeat="category in tagcategories">
<div>{{ category.name }}</div>
<div data-ng-repeat="tag in category.tags">
<div>
<input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">
{{ tag.name }}
</div>
</div>
<hr>
</div>
</div>
<pre>{{selected|json}}</pre>
<pre>{{selectedTags|json}}</pre>
</body>
<script src="jquery-1.8.3.js"></script>
<script src="angular1.2.9.js"></script>
<script src="index02.js"></script>
</html>
<input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">，它存储了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，全选取消。
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<title>AngularJS checded</title>
</head>
<body>
<div ng-controller="myController">
<label for="flag">全选
<input id="flag" type="checkbox" ng-model="select_all" ng-change="selectAll()">
</label>
<ul>
<li ng-repeat="i in list">
<input type="checkbox" ng-model="i.checked" ng-change="selectOne()">
<span>{{i.id}}</span>
</li>
</ul>
</div>
</body>
<script src="jquery-1.8.3.js"></script>
<script src="angular1.2.9.js"></script>
<script src="index03.js"></script>
</html>
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
<!DOCTYPE html>
<html data-ng-app="valueExample">
<head>
<title>AngularJS checded</title>
</head>
<body>
<form ng-controller="ExampleController">
<h2>Which is your favorite?</h2>
<label ng-repeat="name in names" for="{{name}}">
<input type="radio"
ng-model="my.favorite"
ng-value="name"
id="{{name}}"
name="favorite">
{{name}}
</label>
<div>You chose {{my.favorite}}</div>
</form>
</body>
<script src="jquery-1.8.3.js"></script>
<script src="angular1.2.9.js"></script>
<script src="index04.js"></script>
</html>
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