关于前端:博客文章测试

本文整顿 angular1 版本中罕用的 select radio checkbox 实例，供大家学习参考。

举例：

<!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 的值，即默认选中该项。

举例（只展现要害 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 值，即选中该项。

举例：

// html
<input type="checkbox" ng-model="checkVal"> 启用

// js
$scope.checkVal = true;  // 复选框勾选

在线代码演示

解析： checkbox复选框由 ng-model 值相对是否勾选，当值为 true 时勾选，false时不勾选。

插入图片测试

关于前端:博客文章测试

1、Select

2、Radio

3、Checkbox