（6）AngularJS 1.X 与页面控制相关的指令

最新推荐文章于 2021-06-03 13:04:41 发布

GISer.Wang

最新推荐文章于 2021-06-03 13:04:41 发布

阅读量806

点赞数 1

分类专栏： angularjs1.X 文章标签： angularjs

本文链接：https://blog.csdn.net/LoveCarpenter/article/details/54882848

版权

angularjs1.X 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

引言
AngularJS控制页面元素

1.引言

在本篇博客中主要介绍一下和页面控制相关的指令，其中有ng-repeat指令，ng-include指令，ng-show指令指令，ng-switch指令，ng-if指令，ng-bind-html指令，ng-non-bindable指令，通过这些指令会让我们的页面变得更加的丰富，接下来我们来看看这些指令如何控制我们的页面元素。

2.`AngularJS`控制页面元素

2.1 `ng-if`指令控制页面

2.1.1 代码实例

首先引入AngularJS函数库（略）
创建我们的AngularJS的作用域

<html ng-app="myApp">
    <head>
        <script src="js/angular.js"></script>
        <meta charset="utf-8">
    </head>
    <body>
    </body>
</html>

使用ng-if指令控制页面

    <div ng-controller="firstController">
        <div ng-click="click();">点击div</div>
        <div ng-if="flag">div显示</div>
    </div>

编写我们的控制器

        var app=angular.module("myApp",[])
        app.controller("firstController",function($scope){
            $scope.flag=true;
            $scope.click= function () {
                $scope.flag=!$scope.flag;
            }
        })

运行结果（当点击div的时候，div将不会显示,div标签被删除了）
（消失的div）

（div未消失）

2.2 `ng-repeat`指令控制页面

使用ng-repeat指令可以在页面输出我们的数组，同时ng-repeat指令也提供参数供我们使用，其中有：$index,$first,$middle,$last,$even，$odd，接下来我们来看看这个指令应该如何使用

2.2.1 代码实现

引入AngularJS函数库（略）
指定AngularJS作用域

<html ng-app="myApp">
    <head>
        <script src="js/angular.js"></script>
        <meta charset="utf-8">
    </head>
    <body>
    </body>
</html>

创建控制器，添加一个数组变量

        var app=angular.module("myApp",[])
        app.controller("firstController",function($scope){
            $scope.arr=["张三","李四","王五"]

        })

利用ng-repeat指令输出我们的数组（同时看看该指令提供给我们的参数）

<div ng-controller="firstController">
        <div>
            <li ng-repeat="item in arr">{{item}}---{{$index}}--{{$first}}</li>
        </div>
    </div>

运行结果

这里写图片描述

2.3 `ng-switch`指令控制页面

通过ng-switch指令我们可以根据相应的需求生成DOM树，ng-switch和ng-switch-when和ng-switch-default指令结合使用，接下来我们看一下该指令的使用。

2.3.1代码实现

创建控制器

        var app=angular.module("myApp",[])
        app.controller("firstController",function($scope){
            $scope.test="settings"
        })

创建html片段

    <div ng-controller="firstController">
        <input ng-model="test" type="text">
        <div ng-switch on="test">
            <div ng-switch-when="settings">settings</div>
            <div ng-switch-when="home">Home</div>
            <div ng-switch-default>default</div>
        </div>
    </div>

运行结果

这里写图片描述

2.4 `ng-show`指令控制页面

ng-show指令可以控制某标签是否显示

2.4.1 代码实现

html标签实现

    <div>
        <input ng-model="test" type="checkbox">
        <div ng-show="test">ng-show实例</div>
    </div>

运行结果（注意：标签消失并不是被删除了，而是添加了一个样式）

这里写图片描述

2.5 `ng-include`指令控制页面

通过ng-include指令我们可以将外界的页面代码包含进来，ng-include指令可以包含外部的一个html页面，同样也可以包含一个html模板，接下来我们就分别来演示一下该命令的使用。

2.5.1 `ng-include`包含页面

首先我们创建一个html，该html的名称叫做：test.html，内容为

<h1>new page</h1>

在主页面中使用ng-include指令（注意：url是一个变量）

<div ng-controller="firstController">
        <div ng-include="url"></div>
    </div>

创建我们的控制器

        var app=angular.module("myApp",[])
        app.controller("firstController",function($scope){
            $scope.url="test.html"
        })

运行结果

这里写图片描述

2.5.2 `ng-include`包含模版

首先我们创建模版,（模版注意一点：模版必须在angularjs的作用域中）

<script type="text/ng-template" id="mytemplate">
        <h1>new template</h1>
</script>

创建我们的html

 <div ng-controller="firstController">
        <div ng-include="url"></div>
    </div>

创建我们的控制器

 var app=angular.module("myApp",[])
        app.controller("firstController",function($scope){
            //这里是我们模版id
            $scope.url="mytemplate"
        })

2.5.3 `ng-include`注意的地方

在真实的开发中，ng-include指令用的并不是那么多，我们一般使用路由（ngRoute）去加载我们的外部页面，单数路由也有着它自己的缺点。

2.6 `ng-bind-html`指令控制页面

关于ng-bind-html指令的使用，我们需要有一些特殊的设置，看到ng-bind-html指令，可能会想到ng-bind指令，ng-bind指令是可以向页面输出文本的，同理ng-bind-html指令也是向页面输出信息的，那么他们两个有什么区别呢？接下来我们用一个实例演示一下，假设我们的控制器中有一个文本为：$scope.text="<h1>hello world</h1>"，那么我们使用ng-bind输出一下。

代码实现

<html ng-app="myApp">
<head>
    <script src="js/angular.js"></script>
    <meta charset="utf-8">
    <script>
        var app=angular.module("myApp",[])
        app.controller("firstController",function($scope){
            $scope.text="<h1>hello world</h1>"
        })
    </script>
</head>
<body>
    <div ng-controller="firstController">
        <div ng-bind="text"></div>
    </div>
</body>
</html>

运行结果

这里写图片描述

这好像不是我们需要的结果，我们想要将<h1>标签解析，这应该怎么做呢？这要借助我们的ng-bind-html指令。

2.6.1 代码实现

引入我们的AngularJS函数库（省略）
要想使用ng-bind-html指令我们借助一个插件，叫做ngSanitize，所以我们首先引入我们的插件：

<script src="js/angular-sanitize.js"></script>

表明我们的AngularJS的作用域

<html ng-app="myApp">
    <head>
        <script src="js/angular.js"></script>
        <script src="js/angular-sanitize.js"></script>
        <meta charset="utf-8">
    </head>
    <body>
    </body>
</html>

创建我们的html片段

    <div ng-controller="firstController">
        <div ng-bind-html="text"></div>
    </div>

编写我们的控制器（注意我们的模块依赖）

    //注意这里的模块依赖ngSanitize
        var app=angular.module("myApp",["ngSanitize"])
        app.controller("firstController",function($scope){
            $scope.text="<h1>hello world</h1>"
        })

运行结果

这里写图片描述

2.7 `ng-non-bindable` 指令控制页面

在使用AngularJS编写页面的时候，假设我们就想输出一个{{}}怎么办呢？并不想将{{}}解析为表达式，这时候我们就需要用到了ng-non-bindable 指令。接下来我们就来看看该指令的效果。

2.7.1 代码实现

我们的html页面

<html ng-app="myApp">
<head>
    <script src="js/angular.js"></script>
    <meta charset="utf-8">
    <script>
        var app=angular.module("myApp",[])
        app.controller("firstController",function($scope){
            $scope.text="hello world</h1>"
        })
    </script>
</head>
<body>
    <div ng-controller="firstController">
        <div ng-non-bindable>{{text}}</div>
    </div>
</body>
</html>

运行结果（并没有将{{}}解析为我们的表达式）

这里写图片描述

GISer.Wang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（6）AngularJS 1.X 与页面控制相关的指令

引言AngularJS控制页面元素1 ng-if指令控制页面11 代码实例2 ng-repeat指令控制页面21 代码实现3 ng-switch指令控制页面31代码实现4 ng-show指令控制页面41 代码实现5 ng-include指令控制页面51 ng-include包含页面52 ng-include包含模版53 ng-include注意的地方6 ng-b
复制链接

扫一扫