秒味课堂Angular js笔记------指令
1.属性指令
- angularjs样式相关指令:
- ng-class
- ng-style
- ng-href
- ng-src
- ng-attr-(suffix)
- ng-bind
- ng-cloak 没解析完之前标签是隐藏的,解析完后标签是显示的,控制css的指令
- ng-bind-template 支持多表达式'{{text}},{{text}}'
- ng-bind-html 解析字符串中的标签,需要依赖angular-sanitize.min.js
- ng-non-bindable 不解析表达式,就原样输出{{text}}
- ng-show
- ng-hide
- ng-if 当表达式为true ,该标签显示。并不是通过css操作,而且dom的添加删除的操作。
- ng-switch
- on
- default
- when
<div ng-switch on="bBtn">
<p ng-switch-default>默认的效果</p>
<p ng-switch-when = "false">切换的效果</p>
</div>
- ng-open 针对details标签,有兼容性,只支持chrome和Safari
<details ng-open="true"> //true显示下面列表,false不显示
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
- ng-init 建议在循环嵌套中利用此指令定义初始循环变量
<div ng-controller = "Ctr" ng-init = "aIndex = $index ">
{{aIndex}}
</div>
- ng-include 引入模板
- ng-model 扩展,可以对数据添加条件,比如光标离开时更新数据。
<script type="application/javascript">
var sStyle = angular.module("sStyle",[]);
sStyle.controller("styleController",["$scope",function($scope){
$scope.text = "hello";
}])
</script>
<body>
<div ng-controller = "styleController">
<input type="input" ng-model="text" ng-model-options="{updateOn : 'blur'}"/>
<div>{{text}}</div>
</div>
</body>
- ng-controller
- as 针对面向对象
2.标签指令,用于表单验证中
- <a> 在ng-app中会阻止默认行为
- <select> <script type="application/javascript"> var sStyle = angular.module("sStyle",[]);
<script type="application/javascript">
var sStyle = angular.module("sStyle",[]);
sStyle.controller("styleController",["$scope",function($scope){
$scope.colors=[
{ name : "red"},
{ name : "yellow"},
{ name : "blue"}
];
}])
</script>
<body>
<div ng-controller = "styleController">
<a href ="">{{myColor.name}}</a>
<select ng-options = "color.name for color in colors" ng-model = "myColor">
</select>
</div>
</body>
- <textarea>
- <input>
- <form>
- novalidate 阻止html5表单自带的样式,比如没有按照type="email"格式输入,鼠标点击其他位置,此时边框会默认变红色。
3.表单验证
- $valid 表单验证成功返回true,验证失败返回false
- $invalid 相反
- $pristine 表单验证的值未修改返回true,修改过返回false
- $dirty 相反
- $error 验证失败
支持表单验证
- type
- number
- url
- required
秒味课堂Angular js笔记------指令的更多相关文章
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- 秒味课堂Angular js笔记------过滤器
不同过滤器的小demo. currency number uppercase json limitTo date orderBy filter <script> var filterMy ...
- 秒味课堂Angular js笔记------$scope.$watch和$scope.$apply
$scope.$watch(watchFn , watchAction , deepWatch) 其中,watchFn是带有angular表达式或函数字符串: watchAction是一个函数或者表达 ...
- Angular.js之指令学习笔记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- Angular JS笔记
1.引导程序 使用ng-app开始引导一个程序:标记了AngularJS应用的作用域 <!doctype html> <html lang="en" ng-app ...
- Angular JS 中 指令详解
Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数, ...
- Angular JS - 7 - Angular JS 常用指令2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Angular JS - 6 - Angular JS 常用指令
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- angular js 自定义指令
我们有些时候需要把后台返回过来的带有html标签的字符串binding到界面中一个指定的div或者其他的控制器中. 使用普通ng-bind不会自动解析出html语句. js中这样定义: app.dir ...
随机推荐
- html5 input属性
今天才接确html5 +css3 实在是太赞了. 下面我就来介绍一下今天我用到的 input 属性. html5 代码如下: <input type="text" plac ...
- Thinkphp Ajax传地址
在使用文本编辑器时,如果加入图片,涉及到图片的src,需要用到Ajax传地址到处理页面. 在使用Ajax的过程中,如果要通过JSON传递路径值到处理页面,会出现传值不正确. 解决方法就是在传值之前将路 ...
- Flask 快速入门
最简单的flask程序 from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return ...
- iOS编程修改系统音量
iOS的AVFoundation框架提供了基本的音视频播放工具,我们基本上可以靠其中提供的类完成绝大部分的音视频播放任务.但是在音频播放的输出音量的处理上,苹果的策略比较保守.尽管AVPlayer和A ...
- Solr In Action 笔记(1) 之 Key Solr Concepts
Solr In Action 笔记(1) 之 Key Solr Concepts 题记:看了下<Solr In Action>还是收益良多的,只是奈何没有中文版,只能查看英语原版有点类,第 ...
- hdu GCD and LCM
题意:gcd(a,b,c)=g; lcm(a,b,c)=l; 求出符合的a,b,c的所有情况有多少中. 思路:l/g=p1^x1*p2^x2*p3^x3.....; x/g=p1^a1*p2^a2 ...
- hdu How many integers can you find
题意:找出小于n是m个数每个数的倍数的数的个数. 思路:用二进制表示是那几个数的倍数. 二进制进行容斥,去掉小于0的数. #include <cstdio> #include <cs ...
- SIM卡读卡器的研究与设计
SIM卡(Subscriber Identity Module).即用户识别模块,是一张符合GSM规范的"智慧卡".SIM卡可以插入任何一部符合GSM规范的移动电话中," ...
- android 状态栏(StatusBar)
一.SystemUI 概述 自 android2.2 开始 , 原本存在与 framework-res.apk 中的状态栏和下拉通知栏界面控制被分割出一个单独的 apk 文件 , 命名为 System ...
- (转载)PHP array_slice() 函数
(转载)http://www.w3school.com.cn/php/func_array_slice.asp PHP Array 函数 定义和用法 array_slice() 函数在数组中根据条件取 ...