AngularJS指令小结

刚刚接触AngularJS,总结了一些关于AngularJS的基本指令。

1、 ng-bind-html 类似于html()

  

js代码: /*ng-bind-html*/ var app=angular.module('myApp',['ngSanitize']); app.controller('myCtrl1', function($scope){ $scope.myHtml="Hello

World

"; })

2、 ng-bind-template 绑定多个表达式

    
js代码: /*ng-bind-template*/ var app=angular.module('myApp',[]); app.controller('myCtrl2', function($scope){ $scope.firstname="zhao"; $scope.lastname="han"; })

3、ng-blur 失去焦点 时执行的表达式

    

4、ng-change 当值发生改变时

     

js代码: /*ng-change*/ var app=angular.module('myApp',[]); app.controller('myCtrl3',['$scope',function($scope){ $scope.count=0; $scope.myFun=function(){ $scope.count++; }; }]);

5、ng-checked

       
    
    
    

6、ng-class

css代码:

html代码:

    

hello

World

7、ng-class-even 偶数行 ng-class-odd 只在奇数起作用 no-repeat 循环输出指定的html

{{x.name}} {{x.age}}
js代码: /*ng-class-event*/ app.controller('myCtrl4', function($scope){ $scope.records=[ { "name":"tom1", "age":18 }, { "name":"tom2", "age":17 }, { "name":"tom3", "age":16 }, { "name":"tom4", "age":15 } ]; })

8、ng-click 点击触发事件

{{count}}

js代码: /*ng-click*/ app.controller('myCtrl5', ['$scope', function($scope){ $scope.count=0; $scope.clickFun=function(){ $scope.count++; } }])

9、ng-cloak 防止AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果

10、ng-copy 复制 ng-cut 剪贴


{{count}}

11、 ng-dblclick 双击


{{count}}

12、 ng-focus 获取焦点时

13、ng-hide 隐藏


选中隐藏:

welcome

14、ng-href 给a标签添加链接


15、ng-if 如果为true 添加移除元素 如果为false 移除元素


    

zzzzzz

16、ng-include 包含html文件 filename 文件名 onload 文件加载完执行的表达式-->

17、ng-keydown ng-keypress 按下键 ng-keyup 按键起来

18、ng-list 将用户输入的值转换成数组


{{value}}

19、 ng-model-options 在触发某个事件时绑定输入框的值到 scope 变量中 debounce 等待多少秒后绑定数据

{{myval}}
js代码: /*ng-model-options*/ app.controller('myCtrl6',function($scope){ $scope.myval="aaa"; });

20、 ng-non-bindable 不需要AngularJS 来编译 比如{{5+5}} 输出以后还是{{5+5}}

21、ng-open



学的不仅是技术,更是梦想!

- 菜鸟教程

你可能感兴趣的:(AngularJS指令小结)