8-angular 要点温习-1

时间 2019-12-01

原文原文链接

angualr 要点温习

一、一些 ng 指令

ng-disabled
- true|false ，规定一个元素是否被禁止，但不会为隐藏
ng-keydown/ng-keypress/ng-keyup
ng-mousedown/ng-seenter 鼠标穿过

二、一些 angular 内置方法/类比 jq

angular.lowercase()
angular.uppercase()
angular.copy()
- 深克隆
angular.forEach()
- 类比 forEach

var objs = [{a: 1}, {a: 2}];  
angular.forEach(objs, function(data, index, array) {  
    //data等价于array[index] 
    console.log(data.a + '=' + array[index].a);  
});  
              
var objs = {"a":1,"b":2}  
angular.forEach(objs, function(data, index, array) {  
    //1 "a" {a: 1, b: 2} 
    console.log(data,index,array);  
});  
复制代码

判断 JavaScript 对象类型
- angular.isArray() || 若是类型是数组返回 true
- angular.isDate()
- angular.isDefined()
- angular.isElement()
- angular.isFunction() 若是引用的是函数返回 true
- angular.isNumber() 若是引用的是数字返回 true,若是输入框是input标签，要检测输入框内容是否为数字，则使用!isNaN($scope.myInput);
- angular.isObject() 若是引用的是对象返回 true
- angular.isString() 若是引用的是字符串返回 true
- angular.isUndefined() 若是引用的未定义返回 true
- angular.equals(a,b) 若是两个对象相等返回 true
- *angular.fromJson() 反序列化 JSON 字符串
- *angular.toJson() 序列化 JSON 字符串

三、建立多个 ng-app

angular 中自认可第一个 ng-app，经过 var app =angular.module("myApp",[]);便可获它的操做权；此时咱们须要手动的初始化第二个 ng-appjavascript
angular.bootstrap 来手动添加html

<div id="A1" ng-app="app1">  
    <input ng-model="name" type="text" placeholder="请输入姓名">  
    <p>个人姓名： {{name}}</p>  
</div>  
  
<div id="A2" ng-app="app2">  
    <input ng-model="age" type="number" placeholder="请输入年龄">  
    <p>个人年龄: {{age}}</p>  
</div>  
<script type="text/javascript"> var app1 = angular.module("app1", []); //自动加载  var app2 = angular.module("app2", []); //手动加载  angular.bootstrap(document.getElementById("A2"), ['app2']); // 手动加载2  </script>  
复制代码

四、怎么在 angular 架构中建立编译元素

添加新的元素则须要经过编译实现，编译的目的在于让添加的脚本代码支持ng-?指令及{{}}表单式。展现代码以下：

<div ng-app="myApp" ng-controller="myCtrl as ctrl">
	<div id="addEle"></div>
</div>
<script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope, $compile) { var vm = this; vm.msg = 'hello'; // 建立编译函数 var compileFn = $compile('<div>{{ctrl.msg}}</div>'); // 传入scope，获得编译好的dom对象(已封装为jqlite对象) // 也能够用$scope.$new()建立继承的做用域 var $dom = compileFn($scope); //返回的$dom是一个jQLite(jQuery的子集)对象 console.log($dom); // 添加到文档中 var jqLite = angular.element(document.getElementById("addEle")); jqLite.append($dom); //$dom.remove(); //移除语句 }); </script>
复制代码

五、jqLite的应用

var jqEle = $("#myDiv"); //jquery写法
var jqLite = angular.element(document.getElementById("myDiv")); //jqlite写法


复制代码

六、过滤器

经常使用的一些过滤器，也能够本身封装和补充 service 来自带参数。java

uppercase
lowercase
currency 化为货币符号
number 格式化为数字
date 时间
orderBy: "?":某属性按从小到大排序 ( orderBy:'-id' , id 降序排列 ) ( orderBy:'id', id 升序排列 )

//自定义过滤器 
app.filter('addOne', function() {  
    return function(i) {  
        var result = 0;  
        if(!isNaN(i)) {  
            result = 1 + parseInt(i);  
        }  
        return result;  
    }  
});  

//自定义过滤器带参数 
app.service('addOneService', function() {  
    this.add = function(i) {  
        var result = 0;  
        if(!isNaN(i)) {  
            result = 1 + parseInt(i);  
        }  
        return result;  
    }  
});  
复制代码

七、表单

$error.required 惟一值验证
 $error.email 文本输入内置电子邮件验证。
 $error.number 带有数量验证的文本输入。也能够有最小和最大值的附加属性。
 $error.date 带有输入日期文本输入。
 $error.url 带有输入验证的URL文本输入。
 $error.minlength,参数范围需从input中ng-minlength设置
 $error.maxlength，参数范围需从input中ng-maxlength设置
 $error.pattern,正则表达式需从input中ng-pattern设置
 $dirty 表单有填写记录 
 $pristine 表单没有填写记录
 $valid 字段内容合法的,如formname.$valid
 $invalid 字段内容是非法的 
复制代码

八、switch 和 switch-when 的使用

相似于 JavaScript 的 switch

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>demo-ng-switch</title>
		<script type="text/javascript" src="../js/libs/angular/angular.js" ></script>
	</head>

	<body>
		<div ng-app="myApp" ng-controller="myCtrl">
			<form>
				选择一个选项:
				<input type="radio" ng-model="myVar" value="dogs">Dogs
				<input type="radio" ng-model="myVar" value="tuts">Tutorials
				<input type="radio" ng-model="myVar" value="cars">Cars
			</form>

			<div ng-switch="myVar">
				<div ng-switch-when="dogs">
					<h1>Dogs</h1>
					<p>Welcome to a world of dogs.</p>
				</div>
				<div ng-switch-when="tuts">
					<h1>Tutorials</h1>
					<p>Learn from examples.</p>
				</div>
				<div ng-switch-when="cars">
					<h1>Cars</h1>
					<p>Read about cars.</p>
				</div>
			</div>
		</div>

		<script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) {}); </script>
	</body>

</html>
复制代码