Angular.js（四）

ng-class：与css相似，

当样式写在<style></style>中的时候，可以通过true和false来控制是否添加该样式

<div ng-class="{active:true,active2:true}">{{ text }}</div>

ng-style：用法和css中style用法类似

两种用法：

（1）当样式写在行间的时候

<div ng-style = '{color :"green",background:"yellow"}'>{{ text }}</div>

（2）当样式写在JavaScript中时

var m1 = angular.module('myApp',[]);m1.controller('A',['$scope',function($scope){$scope.text = '<h1>hello</h1>';$scope.style = {color :"green",background:"yellow"};}])

<div ng-style = '{{ style }}'>{{ text }}</div>

ng-attr-(suffix 具体的属性名)：属性名通用写法

JavaScript中：

var m1 = angular.module('myApp',[]);m1.controller('A',['$scope',function($scope){$scope.text = 'hello';$scope.url= 'https://www.baidu.com';}])

html中：也可以直接写成 ng-href（除了 ng-href  和 ng-src 以外，其他的属性要写成通用属性写法）

<a ng-attr-href = "{{ url }}" ng-attr-title="{{ text }}">{{text}}</a>

ng-show , ng-hide类似于css中的block和none

ng-show：true代表显示，false代表隐藏

ng-hide：true代表隐藏，true代表显示

ng-if：true添加节点，false删除节点（类似于DOM操作）

JavaScript中 $scope.bOn = true;

<input type="checkbox" ng-model = 'bOn'>    // 开始时是选中的状态 ---- 未选中的状态<div ng-show = 'bOn'>123456</div>           // 显示状态 ---- 隐藏状态<div ng-hide = 'bOn'>987654</div>           // 隐藏状态 ---- 显示状态<div ng-if = 'bOn'>000000</div>             // 添加节点 ---- 删除节点

<div ng-switch on = 'bOn'>                       // true ---- false<p ng-switch-default>默认状态</p>        // 显示 ---- 隐藏<p ng-switch-when = 'false'>切换状态</p> // 隐藏 ---- 显示</div>

<details ng-open = 'bOn'>                        // true ---- false<summary>标题</summary>       <p>显示内容</p>                          // 显示 ---- 隐藏</details>

ng-init：初始化数据的指令（写在ng-controller中，但是一般采用$scope来设置，不会出现问题）

案例：输出二维数组中，每个元素的下标

<div ng-controller="A"><div ng-repeat="outerArr in arrList" ng-init='outerIndex = $index'><div ng-repeat="innerArr in outerArr" ng-init="innerIndex = $index">{{ innerArr }} : {{ outerIndex }}{{innerIndex}}</div></div></div>

ng-include：引入一段代码

<div ng-controller="A" ng-include="'temp.html'">

ng-model：实现双向数据的绑定， ng-model-options：来选择什么时候触发这个绑定 ng-model-options="updateOn：'执行的事件'"

案例：输入框通过失去焦点事件，触发数据的双向绑定

<input type="text" ng-model="text" ng-model-options="{updateOn:'blur'}"><p>{{text}}</p>

ng-controller：对于面向对象的写法

var m1 = angular.module('myApp',[]);m1.controller('A',['$scope',fn]);   // 构造函数为 fn function fn($scope){}fn.prototype.text = 'hello';       // 构造函数下的属性fn.prototype.show = function(){    // 构造函数下的方法return 'show';}

<div ng-controller = 'A as a1'>    // 函数名 as 对象名（自己命名）<p>{{a1.text}}</p><p>{{a1.show()}}</p></div>

标签指令 ： <a href="#></a>

<div ng-app="myApp" ng-controller = 'A'>    // 模块化 只针对 ng-app 所在的模块中<a href="#">1111111</a>             // angularsJs 中的标签指令，阻止了默认行为（点击链接时，不会刷新页面）</div><a href="#">2222222</a>                     // 只要点击就会刷新页面

标签指令 ： <select></select>

<div ng-app="myApp" ng-controller = 'A'><a href="#">{{ mybind.name }}</a>  // 循环遍历数组 arrList <select ng-options = 'list.name for list in arrList' ng-model="mybind">  // ng-options 和 ng-repeat 用法类似</select></div>

标签指令 ： <form></form>

<form name="myForm"><input type="text" ng-model = "text" name="myText"><p>{{ myForm.myText.$valid }}</p>        // true 表单验证成功<p>{{ myForm.myText.$invalid }}</p>      // false <p>{{ myForm.myText.$pristine }}</p>     // true 初始值未修改<p>{{ myForm.myText.$dirty }}</p>        // false <p>{{ myForm.myText.$error }}</p>        // {} 返回的是验证信息</form>

<form name="myForm"><input type="email" ng-model = "text" name="myText"><p>{{ myForm.myText.$valid }}</p>        // false 表单验证失败，同时输入框内不会显示内容<p>{{ myForm.myText.$invalid }}</p>      // true <p>{{ myForm.myText.$pristine }}</p>     // true 初始值未修改<p>{{ myForm.myText.$dirty }}</p>        // false <p>{{ myForm.myText.$error }}</p>        // {"email":true} true代表验证失败，false代表验证成功</form>

可以通过 ng-valid{} 来设置表单的样式

<form name="myForm"><input type="text" ng-model = "text" name="myText" required ng-minlength= "5" ng-pattern='/^[a-zA-z]+$/'>       <p>{{ myForm.myText.$error }}</p>  // 不为空 ，返回false  满足正则，全为字母，返回false  最小长度不小于5，返回false</form>

表单验证实实例：

var m1 = angular.module('myApp',[]);m1.controller('A',['$scope',function($scope){$scope.verify = {initial:'default',dataList : [{ name : 'default', tips :'请输入用户名'},{ name : 'required', tips :'用户名不能为空'},{ name : 'pattern', tips :'用户名必须为字母'},{ name : 'pass', tips :'√'}],change : function(err){console.log(err);for(var attr in err){if(err[attr] == true){this.initial = attr ;return}}this.initial = 'pass';}};$scope.verifytwo = {initial:'default',dataList : [{ name : 'default', tips :'请输入密码'},{ name : 'required', tips :'密码不能为空'},{ name : 'minlength', tips :'密码不能少于六位'},{ name : 'pass', tips :'√'}],change : function(err){for(var attr in err){if(err[attr]  == true){this.initial = attr;return;}this.initial = 'pass';}}};}]);

<div ng-controller = 'A'><form name="myForm"><div><label>用户名:</label><input type="text" name='myText' ng-model="verify.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur = 'verify.change(myForm.myText.$error)'><span ng-repeat="re in verify.dataList |filter : verify.initial">{{ re.tips }}</span></div><br>  <div><label>密码:</label><input type="password" name="myPassword" ng-model ="verifytwo.name" required ng-minlength="6" ng-blur = "verifytwo.change(myForm.myPassword.$error)"><span ng-repeat="re in verifytwo.dataList | filter : verifytwo.initial">{{ re.tips }}</span></div>  </form></div>