引言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-bind-html指令控制页面
61 代码实现 7 ng-non-bindable 指令控制页面
71 代码实现
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){
$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>
编写我们的控制器（注意我们的模块依赖）
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>
运行结果（并没有将{{}}解析为我们的表达式）
转载请注明原文地址: https://ju.6miu.com/read-661939.html
