Angular——内置指令
内置指令
ng-app 指定应用根元素,至少有一个元素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示,true显示、false不显示
ng-hide控制元素是否隐藏,true隐藏、false不隐藏
ng-if控制元素是否“存在”,true存在、false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red {
color: red;
} .blue {
color: blue;
} .yellow {
color: yellow;
}
</style>
</head>
<body ng-app="App">
<div ng-controller="DemoController">
<h1 ng-show="false">ng-show</h1>
<h1 ng-hide="true">ng-hide</h1>
<h1 ng-if="false">ng-if</h1>
<img ng-src="{{path}}">
<span ng-class="{red:true,blue:true}">ng-class</span>
</div>
<script src="../libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
$scope.path = './images/2203.png';
}]);
//ng-if可以将元素直接移除,ng-show与ng-hide页面虽然看不到,但是检查依然可以看见
//ng-src scr的值若是一个绑定的值,浏览器渲染的时候会发送请求,因为没解析到脚本,所以不认识这里会有一个小bug,直到
//解析到了脚本以后才会去替换这个img标签里src的值
//ng-href同上
</script>
</body>
</html>
Angular——内置指令的更多相关文章
- angular内置指令相关知识
原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...
- Angular内置指令(一)
要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突 目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...
- Angular内置指令
记录一下工作中使用到的一些AngularJS内置指令 内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...
- Angular内置指令(二)
目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...
- [转] Angular 4.0 内置指令全攻略
[From] https://segmentfault.com/a/1190000010416792 简书链接 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- AngularJS内置指令
指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单 ...
- angularJS内置指令一览
基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hi ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令
1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...
随机推荐
- nginx,tornado,websocket,supervisord配置成型
因为要上生产环境,所以配置还是专业一些比较好. nginx.conf upstream websocket_host { server 127.0.0.1:9527; } location /ws_l ...
- Stuts2的"struts.devMode"设置成true后,不起作用的解决的方法
不用 <constant name="struts.devMode" value="true" /> 改成 <constant name=& ...
- shell中的四种模式匹配
POSIX为shell为进行模式匹配提供了四种参数替换结构(老版本的shell可能不支持),每种结构有两个参数:变量名(或变量号)及模式. 第一种模式: ${variable%pattern}, ...
- python字符串截取
python字符串截取 str = 'abcd' str[0:-1],-1表示末尾开始的位置,但是[]操作符不取尾下标所对应的字符: 所以str[0:-1] ---->‘abc' str[0:1 ...
- Linux后台执行
在Linux中有时你须要将脚本(test.sh)和可运行程序(exe)后台运行,请使用例如以下方式: nohup ./test.sh & nohup ./exe & 这样执行的程序能够 ...
- OC中APPDelegate[[UIApplication shareApplication]delegate]]Swift实现
直接上代码: var myDelegate:AppDelegate? myDelegate = UIApplication.sharedApplication().delegate as? AppDe ...
- 【翻译自mos文章】使用aum( Automatic Undo Management) 时遇到 ORA-01555错误--- 原因和解决方式。
使用aum( Automatic Undo Management) 时遇到 ORA-01555错误--- 原因和解决方式. 參考原文: ORA-01555 Using Automatic Undo M ...
- FOBiz组合模糊查询
List list= delegator.findList("Entity",condition , null, null, null, false);其中condition为:组 ...
- Fy's dota2
Fy 觉得自己玩 cf,lol 这种高端游戏已经够厉害了,于 是他决定去玩 dota2.结果 fy 的鼠标右键坏了,所以他就等 到 2250 买了把闪烁匕首,用跳刀前进,准备去送泉水.但 是 fy 一 ...
- vs打开wixproj后缀文件
1.在正常情况下vs是无法打开wixproj工程的,能打开也只能是以记事本方式打开该文件本身 2.所以此时需要下载wixtool,安装后即可打开上述类型文件 3.最好也安装好vs对应版本的扩展包 4. ...