AngularJS(二)——常见指令以及下拉框实现

前言

    学完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-optionsng-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>

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

 

小结

    除了上面的指令外AngularJS还有很多其他诱人的指令等待我们去认识它,因为上面的有个人小小的见解,如果有不恰当的地方,望大神指正。


感谢您的宝贵时间···
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

女汉纸一枚

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值