AngularJS HTML DOM
生活随笔
收集整理的這篇文章主要介紹了
AngularJS HTML DOM
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
AngularJS 為 HTML DOM 元素的屬性提供了綁定應用數據的指令。今天就為大家介紹一下AngularJS中一些與HTML DOM操作有關的指令。
ng-options
在 AngularJS 中我們可以使用 ng-option 指令來創建一個下拉列表，列表項通過對象和數組循環輸出。示例代碼如下：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js"></script><script type="text/javascript">angular.module("myApp", []).controller("myCtrl", function($scope) {$scope.items = ["red", "blue", "green"];});</script></head><body ng-app="myApp" ng-controller="myCtrl"><select ng-model="selectColor" ng-options="item for item in items"></select></body></html>這樣就會顯示一個下拉選擇列表，看過之前博客的朋友應該知道，在AngularJS中有一個ng-repeat指令用于重復創建元素，那么我們用ng-repeat來實現同樣的效果，代碼如下：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js"></script><script type="text/javascript">angular.module("myApp", []).controller("myCtrl", function($scope) {$scope.items = ["red", "blue", "green"];});</script></head><body ng-app="myApp" ng-controller="myCtrl"><select ng-model="selectColor"><option ng-repeat="item in items">{{item}}</option></select></body></html>這段代碼也同樣可以實現顯示一個下拉選擇框，那么在這兩者當中，使用哪個更好呢？
ng-repeat 指令是通過數組來循環 HTML 代碼來創建下拉列表，但 ng-options 指令更適合創建下拉列表，使用 ng-options 的數據可以是對象， 而ng-repeat 是一個字符串。，當我們用于創建下拉選擇框的數據是一個對象的時候，ng-options的優勢就特別明顯了。下面我們通過代碼來演示一下：
ng-disabled
ng-disabled 指令直接綁定應用程序數據到 HTML 的 disabled 屬性。
示例代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js"></script><script type="text/javascript">angular.module("myApp", []).controller("myCtrl", function($scope) {});</script></head><body ng-app="myApp" ng-controller="myCtrl"><input type="checkbox" ng-model="checked" /><input ng-disabled="checked" type="button" value="按鈕"/></body></html>ng-show和ng-hide
ng-show 指令隱藏或顯示一個 HTML 元素。ng-hide 指令也是用于隱藏或顯示 HTML 元素。與ng-show相反。
示例代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js"></script><script type="text/javascript">angular.module("myApp", []).controller("myCtrl", function($scope) {});</script></head><body ng-app="myApp" ng-controller="myCtrl"><input type="checkbox" ng-model="showed" /><input ng-show="showed" type="button" value="按鈕1"/><input type="checkbox" ng-model="hided" /><input ng-hide="hided" type="button" value="按鈕2"/></body></html>總結
以上是生活随笔為你收集整理的AngularJS HTML DOM的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android/IOS SDK怎么判断用
- 下一篇： 无法连接到RDP服务器