AngularJS入门(9)-与DOM有关的指令

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。今天就为大家介绍一下AngularJS中一些与HTML DOM操作有关的指令。

ng-options

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出。示例代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript"> angular.module("myApp",[]) .controller("myCtrl",function($scope) { $scope.items = ["red","blue","green"]; }); </script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectColor" ng-options="item for item in items"></select>
    </body>

</html>

这样就会显示一个下拉选择列表,看过之前博客的朋友应该知道,在AngularJS中有一个ng-repeat指令用于重复创建元素,那么我们用ng-repeat来实现同样的效果,代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript"> angular.module("myApp","green"]; }); </script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectColor">
            <option ng-repeat="item in items">{{item}}</option>
        </select>
    </body>

</html>

这段代码也同样可以实现显示一个下拉选择框,那么在这两者当中,使用哪个更好呢?
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表,但 ng-options 指令更适合创建下拉列表,使用ng-options 的数据可以是对象, 而ng-repeat 是一个字符串。,当我们用于创建下拉选择框的数据是一个对象的时候,ng-options的优势就特别明显了。下面我们通过代码来演示一下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript">angular.module("myApp",function($scope) { $scope.items = { red: { r: 255,g: 0,b: 0 },green: { r: 0,g: 255,blue: { r: 0,b: 255 }  } }); </script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectColor" ng-options="x for (x,y) in items"></select>
        <div>{{selectColor}}</div>
    </body>
</html>

ng-disabled

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

示例代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript"> angular.module("myApp",function($scope) {}); </script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="checkbox" ng-model="checked" />
        <input ng-disabled="checked" type="button" value="按钮"/>
    </body>

</html>

ng-show和ng-hide

ng-show 指令隐藏或显示一个 HTML 元素。ng-hide 指令也是用于隐藏或显示 HTML 元素。与ng-show相反。

示例代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript"> angular.module("myApp",function($scope) {}); </script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="checkbox" ng-model="showed" />
        <input ng-show="showed" type="button" value="按钮1"/>
        <input type="checkbox" ng-model="hided" />
        <input ng-hide="hided" type="button" value="按钮2"/>
    </body>

</html>

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...