AngularJS HTML DOM

最新推荐文章于 2018-10-24 17:38:07 发布

蒋固金

最新推荐文章于 2018-10-24 17:38:07 发布

阅读量2k

点赞数 1

分类专栏： AngularJS 文章标签： angularjs html

本文链接：https://blog.csdn.net/jianggujin/article/details/50958781

版权

AngularJS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

AngularJS

10 篇文章 3 订阅

订阅专栏

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", [])
                .controller("myCtrl", function($scope) {
                    $scope.items = ["red", "blue", "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", [])
    .controller("myCtrl", function($scope) {
        $scope.items = {
            red: {
                r: 255,
                g: 0,
                b: 0
            },
            green: {
                r: 0,
                g: 255,
                b: 0
            },
            blue: {
                r: 0,
                g: 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", [])
                .controller("myCtrl", 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", [])
                .controller("myCtrl", 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>