AngularJS(二)
前言学完AngularJS,总体上感觉没什么新鲜的东西,但是又感觉每一步都很新鲜,因为没有见过,又因为学到的语法函数和JavaScript差不多,本篇主要介绍一些AngularJS的指令,常见指令和自定义指令。 内容指令:官方定义: ·通过被称为指令的新属性来扩展HTML; ·通过内置的指令来为应用添加功能; ·允许你自定义指令; 在AngularJS中个人认为相当于函数,就是说不管我函数体的实现放到哪里了,我可以采用指令,对指定的scope产生特定的命令。 常见指令:
举例: 描述:通过表达一个下拉框效果,来说明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',url : "http://www.taobao.com"} ]; }); </script> 通过上面对比可以看出,选择值为一个对象的时候,可以获得更大的信息,应用也更加灵活。
小结除了上面的指令外AngularJS还有很多其他诱人的指令等待我们去认识它,因为上面的有个人小小的见解,如果有不恰当的地方,望大神指正。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |