Angularjs基础(十)
ng-blur 描述：規定blur 事件的行為
實例：當輸入框失去焦點的(onblur)時執行表達式：
<input ng-blur="count = count 1" ng-init="count=0"/>
<h1>{{count}}</h1>
定義和用法
ng-blur 指令用于告訴AngularJS HTML 元素在失去焦點時須執行的表達式。
語法：<element ng-blur="expression"></element>
參數值：值：expression 描述：失去焦點時執行的表達式。
?
ng-change 描述：規定在內容改變時執行的表達式。
實例：當輸入框 的值改變時執行函數。
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-change="myFunc()" ng-model="myvalue">
<p>The input field has changed {{count}} times.</p>
</div>
</body>
<script>
angular.module('myApp',[])
.controller('myCtrl',['$scope',function($scope){
$scope.count =0;
$scope.myFunc = function(){
$scope.count ;
}
}])
</script>
定義和用法
ng-change 指令用于告訴AngularJS 在HTML元素值改變時需要執行的操作。
ng-change 指令需要搭配ng-model 指令使用。
AngularJS ng-change 指令指令不會覆蓋原生的 onchange 事件, 如果觸發該事件，ng-change 表達式與原生的 onchange 事件都會執行。
ng-change 事件在值的每次改變時觸發，它不需要等等一個完成的修改過程或等待失去焦點的動作
ng-change 事件只針對輸入框值的真實修改，而不是通過JavaScript 來修改。
語法：<element ng-change="expression"></element>
參數值： 值:expression 描述：元素值改變時執行表達式。
?
ng-checked 規定元素是否被選中
實例：選擇一個或選擇所有選項：
<body ng-app="">
<p>My:</p>
<input type="checkbox" ng-model="all">
<input type="checkbox" ng-checked="all">
<input type="checkbox" ng-checked="all">
<input type="checkbox" ng-checked="all">
</body>
定義和用法
ng-checked 指令用于設置復選框（checkbox）或單選按鈕(radio)的checked 的屬性。
如果ng-checked 屬性返回true ,復選框（checkbox） 或單選按鈕（radio）將會被選中。
語法：
<input type="checkbox | radio" ng-checked="expression">
參數值： 值：expression 描述; 如果返回true ，將會選中元素選項。
ng-class 描述:指定HTML 元素使用的CSS 類。
實例：修改<div>元素的類：
<select ng-model="home">
<option value="sky">Sky</option>
<option value="tomato">Tomato</option>
</select>
<div ng-class="home">
<h1>Welcome Home !</h1>
<p>I like it !</p>
</div>
定義和用法
ng-class 指令用于給HTML 元素動態綁定一個或多個CSS 類。
ng-class 指令的值可以是字符串，對象，或一個數組。
如果是字符串，多個類名使用空格分隔。
如果是對象，需要使用 key-value 對，key 是一個布爾值，value 為你想要添加的類名。只有在 key 為 true 時類才會被添加。
如果是數組，可以由字符串或對象組合組成，數組的元素可以是字符串或對象。
語法：<element> ng-class="expression"</element>
參數值： 值：expression 描述： 表達式返回一個或多個類名。
ng-class-even 描述：類似ng-class,但只在偶數行起作用。
實例：為表格的偶數行設置 class="striped":
<table>
<tr ng-repeat="x in records" ng-class-even="'striped'" >
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
定義和用法
ng-class-even 指令用于為HTML 元素動態的綁定一個或多個CSS 類，但只能為偶數行。
ng-class-even 指令需要 與ng-repeat 指令搭配使用。
ng-class-even 指令建議使用 在表格的樣式渲染中，但是所有HTML 元素都是支持的。
語法 <element ng-class-even="expression"></element>
參數值：值：expression 描述： 達到指定一個或多個css 類。
ng-class-odd 類似ng-class,但只在奇數行起作用。
實例：為表格的偶數行設置 class="striped"；
<table ng-controller="myCtrl">
<tr ng-repeat="x in records" ng-class-odd="'striped'" >
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
定義和用法
ng-class-odd 指令用于為HTML 元素動態的綁定一個或多個CSS 類，但只能為奇數行。
ng-class-odd 指令需要 與ng-repeat 指令搭配使用。
ng-class-odd 指令建議使用 在表格的樣式渲染中，但是所有HTML 元素都是支持的。
語法：<element ng-class-odd="expression"></element>
參數值： 值： expression 描述： 表達式指定一個或多個CSS 類。
ng-click 定義元素被點擊時的行為
實例：按鈕沒次點擊時，計數變量count自動加1；
<button ng-click ="count = count 1" ng-init="count=0">OK</button>
定義和用法
ng-click 指令告訴了AngularJS HTML 元素被點擊后需要執行的操作。
語法：<element ng-click="expression"></element>
參數值： 值：expression 描述: 元素被點擊后執行的表達式。
ng-cloak 在應用正要加載時防止其閃爍。
實例：頁面加載時防止應用閃爍。
<div ng-app="">
<p ng-cloak>{{5 5}}</p>
</div>
定義和用法
ng-cloak 指令用于在AngularJS 應用在加載時防止AngularJS 代碼未加載完而出現的問題。
語法： <element ng-cloak></element>
參數值： ng-clock 指令沒有參數。
?
ng-controller 定義應用的控制器對象。
實例：為應用變量添加控制器。
<div ng-app="myApp" ng-controller="myCtrl">
Full Name:{{firstName " " lastName}}
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.firstName = "John";
$scope.lastName = "Doe";
})
</script>
定義和用法
ng-controller 指令用于為你的應用添加控制器。
語法：<element ng-controller="expression"></element>
參數值: 值： expression 描述： 控制器
ng-copy 描述：規定拷貝事件的行為。
實例：在輸入框的文本拷貝時執行表達式
<input ng-copy="count = count 1" ng-init="count=0" value="Copy this text">
定義和用法
ng-copy 指令用于告訴AngularJS在HTML 元素文本被拷貝時要執行的操作。
語法： <element ng-copy="expression"></element>
參數值： 值：expression 描述：元素文本被拷貝時執行的表達式。
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的Angularjs基础(十)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SVG 使用
- 下一篇： Angularjs基础(三)