刚刚接触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
学的不仅是技术,更是梦想!
- 菜鸟教程