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>