刚刚接触AngularJS，总结了一些关于AngularJS的基本指令。
1、 ng-bind-html 类似于html()
<div ng-controller="myCtrl1" id="myapp1">
<p ng-bind-html="myHtml"></p>
</div>
js代码：
/*ng-bind-html*/
var app=angular.module('myApp',['ngSanitize']);
app.controller('myCtrl1', function($scope){
$scope.myHtml="Hello <h1>World</h1>";
})
2、 ng-bind-template 绑定多个表达式
<div ng-controller="myCtrl2" ng-bind-template="{{firstname}} {{lastname}}"></div>
<div ng-init="name='tom';age='18'">
<div ng-bind-template="{{name}} {{age}}"></div>
</div>
js代码：
/*ng-bind-template*/
var app=angular.module('myApp',[]);
app.controller('myCtrl2', function($scope){
$scope.firstname="zhao";
$scope.lastname="han";
})
3、ng-blur 失去焦点 时执行的表达式
<div >
<input type="text" ng-init="count=0" ng-blur="count=count+1">
<h1 ng-bind="count"></h1>
</div>
4、ng-change 当值发生改变时
<div ng-controller="myCtrl3">
<input type="text" ng-change="myFun()" ng-model="myvalue">
<p ng-bind="count"></p>
</div>
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
<input type="checkbox" ng-model='check'> <!-- 选中所有 -->
<input type="checkbox" ng-checked="check">
<input type="checkbox" ng-checked="check">
<input type="checkbox" ng-checked="check">
6、ng-class
css代码:
<style>
.red{
color: red;
}
.blue{
color: blue;
}
</style>
html代码:
<select ng-model="home">
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select>
<p ng-class="home">hello</p>
<p ng-class="'red'">World</p>
7、ng-class-even 偶数行 ng-class-odd 只在奇数起作用 no-repeat 循环输出指定的html
<table ng-controller="myCtrl4">
<tr ng-repeat="x in records" ng-class-even="'font'">
<td>{{x.name}}</td>
<td>{{x.age}}</td>
</tr>
</table>
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 点击触发事件
<div ng-controller="myCtrl5">
<button ng-click="clickFun()" >点击</button>
<p>{{count}}</p>
</div>
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 剪贴
<input type="text" ng-init="count=0" ng-copy="count=count+1" value="hello World">
<p>{{count}}</p>
11、 ng-dblclick 双击
<button ng-init="count=0" ng-dblclick="count=count+1">点击</button>
{{count}}
12、 ng-focus 获取焦点时
13、ng-hide 隐藏
<br>选中隐藏：<input type="checkbox" ng-model="click">
<div ng-hide="click">
<h1>welcome</h1>
</div>
14、ng-href 给a标签添加链接
<div ng-init="myHref='http://www.baidu.com'">
<a ng-href="{{myHref}}">{{myHref}}</a>
</div>
15、ng-if 如果为true 添加移除元素 如果为false 移除元素
<input type="checkbox" ng-model="myVar">
<div ng-if="myVar">
<p>zzzzzz</p>
</div>
16、ng-include 包含html文件 filename 文件名 onload 文件加载完执行的表达式-->
17、ng-keydown ng-keypress 按下键 ng-keyup 按键起来
18、ng-list 将用户输入的值转换成数组
<input type="text" ng-model="value" ng-list>
{{value}}
19、 ng-model-options 在触发某个事件时绑定输入框的值到 scope 变量中 debounce 等待多少秒后绑定数据
<div ng-controller="myCtrl6">
<input type="text" ng-model="myval" ng-model-options="{updateOn: 'blur',debounce : 1000}">
{{myval}}
</div>
js代码:
/*ng-model-options*/
app.controller('myCtrl6',function($scope){
$scope.myval="aaa";
});
20、 ng-non-bindable 不需要AngularJS 来编译 比如{{5+5}} 输出以后还是{{5+5}}
21、ng-open
<input type="checkbox" ng-model="open"><br>
<br>
<details ng-open="open">
<summary>学的不仅是技术，更是梦想！</summary>
<p> - 菜鸟教程</p>
</details>
网友评论