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>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。