本文整理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
时不勾选。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。