angularjs html dom -尊龙游戏旗舰厅官网
尊龙游戏旗舰厅官网
收集整理的这篇文章主要介绍了
angularjs html dom
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
angularjs 为 html dom 元素的属性提供了绑定应用数据的指令。今天就为大家介绍一下angularjs中一些与html dom操作有关的指令。
在 angularjs 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出。示例代码如下：
<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来实现同样的效果，代码如下：
<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 指令直接绑定应用程序数据到 html 的 disabled 属性。
示例代码：
<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 指令隐藏或显示一个 html 元素。ng-hide 指令也是用于隐藏或显示 html 元素。与ng-show相反。
示例代码：
<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服务器