8-angular 要点温习-1

西南_张家辉

发布于 2021-02-02 09:50:23

3.2K0

发布于 2021-02-02 09:50:23

文章被收录于专栏：张家辉的树屋

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('{{ctrl.msg}}');
		// 传入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

<html>

	<head>
		<meta charset="UTF-8">
		<title>demo-ng-switchtitle>
		<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>Dogsh1>
					<p>Welcome to a world of dogs.p>
				div>
				<div ng-switch-when="tuts">
					<h1>Tutorialsh1>
					<p>Learn from examples.p>
				div>
				<div ng-switch-when="cars">
					<h1>Carsh1>
					<p>Read about cars.p>
				div>
			div>
		div>

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

html>
复制代码