AngularJS常用指令

  1. ng-app指令:标记AngularJS脚本的作用域,在html标签中添加ng-app属性,说明整个html都是AngularJS脚本作用域。也可以局部添加ng-app属性如在div中运行。
  2. ng-model:类似与ID的作用,用来绑定当前元素

    <div id="box" ng-app ng-init="name='小雪' "> <h1>{{name || 'yyq' }}</h1> <input type="text" ng-model='name' /> </div>
  3. 表达式
    • 双大括号内的表达式:核心的功能是绑定,需要运算其中的表达式,然后再插入到DOM元素中,DOM可以根据表达式的结果的改变而进行实时更新.并且它只在AngularJS的作用域中运行,而不是在整个DOM中
    • 对于AngularJS,鼓励运用MVC(模式module , 试图View , 控制器Controller)模式解耦代码和分解关注点。
    • 由于加载顺序的问题,Angjular.js放在底部,{{}}表达式会出现闪现的问题,因此要么将Angular.js放在head里面声明,要么使用ng-bind
  4. ng-init:用来初始化变量,可以初始化对象和数组等,如果初始化多个变量,中间用;分号隔开

    “`
    ng-init=”name = ‘小雪’; age = 18;person = {name:’YYQ’, age: 20} ; arr = [33,44,55];friends = [{name:’dlj’, age : 21} , {name:’YDL’, age :44}]”

5. ng-bind:用于绑定 ``` <div ng-app ng-init="name = '小黑'"> <h2>{{ name }}</h2> <h2 ng-bind='name'></h2> </div>
  1. ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。
 <div ng-init="nums = [22,33,11,44]"> <h1>遍历数组</h1> <ul> <!--for.. in的写法,for...in的功能--> <!-- 注意:如果遍历数组有重复的数据的,默认会报错, 我们需要加入track by $index就可以解决 例如:<li ng-repeat="num in nums track by $index">{{ num }}</li> --> <li ng-repeat="num in nums ">{{ num }}</li> </ul> </div>
  1. ng-inclue:映入的文件名外层需要套一个单引号,否则显示不出来而且需要用服务器打开,本地不能打开
    <div ng-include="'footer.html'"></div>
  1. ng-click 指令定义了 AngularJS 点击事件。
 <button ng-click="count = count + 1">点我!</button> <p>{{ count }}</p>
  1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope是一个对象,有可用的方法和性。Scope 可应用在视图和控制器上。
 <div ng-app="myApp" ng-controller="myCtrl"> <h1>{{carname}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.carname = "Volvo"; }); </script>

10.
* ng-hide 指令用于设置应用部分是否可见。
* ng-hide=”true” 设置 HTML 元素不可见。
* ng-hide=”false” 设置 HTML 元素可见。
11.
* ng-show 指令可用于设置应用中的一部分是否可见 。
* ng-show=”false” 可以设置 HTML 元素 不可见。
* ng-show=”true” 可以以设置 HTML 元素可见。
12.ng-class:用来切换样式

    ng-class="{true:'active' , false : 'inactive'}[flag]"
通过布尔值来判断应用哪个样式,其中active与inactive是css的类名

13.过滤器:

 <body ng-app> <div ng-init="money = 1234567; name = 'abCde'"> <h1>货币格式化</h1> <h2>{{ money | currency }}</h2> <h2>{{ money | currency : "¥"}}</h2> <h2>{{ money | currency : "RMB ¥"}}</h2> <h1>字母大小写</h1> <h2>{{ name | uppercase }}</h2> <h2>{{ name | lowercase }}</h2> <!-- [33,44,55,66] | limitTo : 2)[0] limitTo限制的是长度,后面的0代表签名2个[33,44]的第0个 --> <h1>限制字符串数组或者字符串的长度</h1> <h2>{{ ([33,44,55,66] | limitTo : 2)[0] }}</h2> <h2>{{ 'hello world' | limitTo : 4 }}</h2> <h2>{{ 'hello world' | limitTo : 5 | uppercase }}</h2> <h1>给数字设置千分位</h1> <h2>{{ 1234567 | number }}</h2> <!--number后面的2表示小数点后面两位 四舍五入 --> <h2>{{ 1234567.126 | number:2 }}</h2> </div> </body>
 <body ng-app> <div ng-init="ages = [12,33,1,23,54,3,15]; persons = [{name : '小白',age : 20},{name : '小黑',age : 22} ,{name : '小黄',age : 29}]"> <h1>数组没没有对象的排序</h1> <h2>{{ '升序: ' + (ages | orderBy) }}</h2> <!--升序: 1,3,12,15,23,33,54--> <h2>降序:{{ ages | orderBy : order : true }}</h2> <!--降序:[54,33,23,15,12,3,1]--> <h2>升序:{{ ages | orderBy : order : false }}</h2> <h1>数组内有对象的排序</h1> <h2>按照age升序: {{ persons | orderBy : "age" }}</h2> <h2>按照age降序: {{ persons | orderBy : 'age' : true }}</h2> </div> </body>

你可能感兴趣的:(AngularJS)