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的优势就特别明显了。下面我们通过代码来演示一下：
<!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: {r: 255,g: 0,b: 0},green: {r: 0,g: 255,b: 0},blue: {r: 0,g: 0,b: 255}});</script></head><body ng-app="myApp" ng-controller="myCtrl"><select ng-model="selectColor" ng-options="x for (x, y) in items"></select><div>{{selectColor}}</div></body></html>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相关推荐
- AngularJS操作DOM——angular.element
addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 ...
- angular html清除元素,使用AngularJS删除DOM元素
我正在尝试根据当前位置路径删除导航栏. 这是我到目前为止: angular.module('myModule') .controller('MainController', function ($lo ...
- android魅族轮播图,用angularjs模仿魅族官网的图片轮播功能
使用指令模仿魅族官网的图片轮播功能(angularjs中DOM操作都在指令中完成) html css .slider{ position: relative; width:900px; height: ...
- AngularJS之禅
AngularJS是客户端MVC框架,它运行在web浏览器中,有助于我们写单页面.AJAX风格的web应用,是一个通用的框架. AngularJS速成 实例:Hello World 首先引用Ang ...
- AngularJS特性
如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性.简单来说Angular.js是google开发者设计和开发的一套前端开发框 ...
- html ng-app,为什么AngularJs写了2个及以上的ng-app=会导致页面渲染不成功
当代码是这样的时候,页面正确渲染: AngularJs学习(13) AngularJS HTML DOM ng-disabled 指令 {{ mySwitch}} 点我 效果: 当代码是这样的时候: ...
- angularjs详解
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- angularjs框架
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- angularjs学习总结 详细教程
本文详细讲解了前言.AngularJS概述.AugularJS特性.功能介绍.功能演示.功能演示.AngularJS进阶.总结七部分,可能会与原文略有不同. 不理解请看原文(尤其是代码部分),本文仅供 ...
最新文章
- [JavaWeb-Servlet]概述与快速入门
- JAVA——孪生素数
- (我总结的实用主义)Loadrunner运行常见错误
- 关于Kotlin循环遍历需要注意索引越界的问题
- 丁磊：那时候我们除了会写软件 什么也不会做
- 计算机电源不能启动不了,电脑不开机，常见原因有哪些，怎么处理，黑屏怎么办...
- 刘宇凡：莫沉浮华，归于平凡
- 前端灰度发布落地方案
- 简单病毒分析及手工查杀
- [附源码]PHP计算机毕业设计小斌美食网站（程序+LW）
- python话费充值_手机话费充值接口开发指南（含API文档，充值移动、联通、电信话费）...
- 排查黑苹果系统RTL 8125B 2.5G网卡驱动故障
- 怎么用计算机弹少年这首歌,为什么《少年》这首歌，能火遍全网，它带来了多少收益呢？...
- 二叉树遍历 递归/非递归/morris
- 台式计算机硬盘能扩大吗,电脑怎么增加磁盘内存
- vue项目 报错 Extra semicolon (semi)
- miui12是Android版本,miui12基于安卓几版本开发的？miui12是安卓11吗[多图]
- 4天上线“战疫”小程序，腾讯敏捷在数字广东的落地实践
- TIA Portal高级编程
- 如何用TextPad预览html,利用TextPad编辑代码的各种技巧