秒味课堂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
