angualr 要点温习
1、一些 ng 指令
- ng-disabled
- true|false ，规定一个元素是否被禁止，但不会为隐藏
- ng-keydown/ng-keypress/ng-keyup
- ng-mousedown/ng-seenter 鼠标穿过
2、一些 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 字符串
3、创建多个 ng-app
-
angular 中自承认第一个 ng-app，通过 var app =angular.module("myApp",[]);即可获它的操作权；此时我们需要手动的初始化第二个 ng-app
-
angular.bootstrap 来手动添加
<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>
复制代码4、怎么在 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>
复制代码5、jqLite的应用
var jqEle = $("#myDiv"); //jquery写法
var jqLite = angular.element(document.getElementById("myDiv")); //jqlite写法
复制代码6、过滤器
常用的一些过滤器，也可以自己封装 和 补充 service 来自带参数。
- 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;
}
});
复制代码7、表单
$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 字段内容是非法的
复制代码8、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>
复制代码