本文整顿angular1版本中罕用的select radio checkbox实例，供大家学习参考。
1、Select
举例：
<!DOCTYPE html><html ng-app="app"><head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-controller="AppCtrl"><select ng-model="myColor" ng-options="item.id as item.val for item in colorArr"></select><script> var app = angular.module("app", []); app.controller("AppCtrl", function ($scope) { $scope.colorArr = [ {id: 0, val: 'red'}, {id: 1, val: 'yellow'}, {id: 2, val: 'blue'}, {id: 3, val: 'white'}, {id: 4, val: 'black'} ]; // 默认选中项 $scope.myColor = 2; })</script></body></html>在线代码演示
解析： 首先看下页面生成的element。
<select ng-model="myColor" ng-options="item.id as item.val for item in colorArr" class="ng-pristine ng-valid ng-touched"> <option value="number:0" label="red">red</option> <option value="number:1" label="yellow">yellow</option> <option value="number:2" label="blue" selected="selected">blue</option> <option value="number:3" label="white">white</option> <option value="number:4" label="black">black</option></select>生成的<option>标签有两个属性value和label，别离对应ng-options指令的item.id和item.val。而默认选项应用ng-model指令，值为<option>标签属性value的值，即默认选中该项。
2、Radio
举例（只展现要害code）:
// html<input type="radio" ng-model="checkVal" value="radio1"> 选项1<input type="radio" ng-model="checkVal" value="radio2"> 选项2// js$scope.checkVal = 'radio2'; // 选项2勾选在线代码演示
解析： ng-model值雷同，等同于有雷同的name值，组成一组单选项。ng-model值等于<input>标签的value值，即选中该项。
3、Checkbox
举例：
// html<input type="checkbox" ng-model="checkVal"> 启用// js$scope.checkVal = true; // 复选框勾选在线代码演示
解析： checkbox复选框由ng-model值相对是否勾选，当值为true时勾选，false时不勾选。
插入图片测试