AngularJS（二）——常见指令以及下拉框实现

最新推荐文章于 2024-05-07 21:56:32 发布

diaoyu3131

最新推荐文章于 2024-05-07 21:56:32 发布

阅读量163

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhoulitong/p/6412339.html

版权

前言

学完AngularJS，总体上感觉没什么新鲜的东西，但是又感觉每一步都很新鲜，因为没有见过，又因为学到的语法函数和JavaScript差不多，本篇主要介绍一些AngularJS的指令，常见指令和自定义指令。

内容

指令：

官方定义：

·通过被称为指令的新属性来扩展HTML；

·通过内置的指令来为应用添加功能；

·允许你自定义指令；

在AngularJS中个人认为相当于函数，就是说不管我函数体的实现放到哪里了，我可以采用指令，对指定的scope产生特定的命令。

常见指令：

AngularJS指令	官方描述	个人理解
ng-app	定义应用程序的根元素	规定AngularJS起作用的作用域
ng-bind	绑定HTML元素到应用程序数据	和平时用的那种数据绑定效果是一样的，但是采用这种做法，可以及时更新绑定内容，不用进行反复的刷新
ng-bind-html	绑定HTML元素的innerHTML到应用程序数据，并移除HTML字符串中危险字符	其实和ng-bind一样，没有多大的差别，这个的写法更加规范（同时插入同一个文本内容，效果一样）
ng-controller	定义应用的控制器对象	在需要控制的HTML标签元素里面，定义控制器，改变控制器对象达到改变HTML的目的
ng-include	在应用中包含HTML文件
ng-init	定义应用的初始化值	大概就是把想要初始化的地方，采用ng-init指令完成
ng-model	绑定HTML控制器的值到应用数据	其实就是绑定一个用来显示的变量，通过控制器部分给控制该值的读取
ng-repeat	定义集合中每项数据的模板	这个非常常用，主要就是重复循环一个标签，循环显示容器类型的值，常用在下拉表中
ng-options	在<select>列表中指定<options>	下拉表的时候非常有用的，但是和ng-repeat在使用的时候，是区别的，后面会举例讲到
ng-selected	指定元素的selected属性	大概理解为给下拉框一个默认值，这样做就是通过该指令，不但可以给默认值而且在读取的时候避免了常规的DOM操作
ng-checked	规定元素是否被选中
ng-class	指定HTML元素使用的CSS类
ng-class-even	类似ng-class，但只在偶数行起作用
ng-class-even	类似ng-class，但只在奇数行起作用
ng-show	显示或隐藏HTML元素
ng-hide	隐藏或显示HTML元素

举例：

描述：通过表达一个下拉框效果，来说明ng-options和ng-repeat的区别点

证明：ng-repeat是通过数组来循环HTML代码，但ng-options指令更适合创建下拉列表，因为ng-options的选项的一个对象，ng-repeat是一个对象，对象有属性可以当容器存放属性值。

ng-repeat部分DEMO

<div ng-app="myApp" ng-controller="myCtrl">
<p>选择网站:</p>
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {site : "Google", url : "http://www.google.com"},
	    {site : "Runoob", url : "http://www.runoob.com"},
	    {site : "Taobao", url : "http://www.taobao.com"}
	];
});
</script>

ng-options部分DEMO

<div ng-app="myApp" ng-controller="myCtrl">
<p>选择网站:</p>
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {site : "Google", url : "http://www.google.com"},
	    {site : "Runoob", url : "http://www.runoob.com"},
	    {site : "Taobao", url : "http://www.taobao.com"}
	];
});
</script>

通过上面对比可以看出，选择值为一个对象的时候，可以获得更大的信息，应用也更加灵活。