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

发布时间：2020-12-17 09:49:28 所属栏目：安全来源：网络整理

导读：AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。今天就为大家介绍一下AngularJS中一些与HTML DOM操作有关的指令。 ng-options 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出。示例代码如下： !

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!