Angular.js之指令學習筆記

時間 2019-11-08

標籤 angular.js angular 指令學習筆記欄目 AngularJS 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-showAndng-hide</title>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
</head>css

<body>html

　　<div ng-app="You" ng-controller="ctrl">
　　　　<div>I'm jiao Dashu and I'm leaning H5 on the school{{title}}</div>
　　　　<div><input type="text" ng-model="title"></div>
　　　　<div><input type="text" ng-value="title"></div>
　　　　<button ng-click="toggle()">show/hidden</button>
　　　　<div style="width: 200px;height: 150px;border:1px solid #ccc;" ng-show="isShow">This is a long adver !</div>
　　　　<button ng-click="toggleDisabled()">toggle the state of input</button>
　　　　<div><input type="text" ng-disabled="isDisabled"></div>
　　</div>數組

<div ng-app="Repeat" ng-controller="ctrl">
　　　　<ul>
　　　　　　app

　　　　　　<li ng-repeat="v in data" ng-class-odd="{red:true}" ng-class-even="{blue:true}">ID:{{v.id}}:{{v.title}}(click number:{{v.click}})</li>
　　　　</ul>
　　　　<div ng-style="{color:'red',fontSize:'30px'}">this is a things long long ago！</div>
　　　　<button ng-click="fn()">click</button><button ng-dblclick="fn()">doubleClick</button>
　　　　<input type="text">
　　</div>ide

　　<form ng-app="Submit" ng-controller="ctrl" name="qianfeng">
　　　　<input type="text" name="title" ng-model="title" ng-trim="false">專一{{title}}移動端研發
　　　　<input type="text" ng-model="content">
　　　　<input type="submit" value="提交">
　　</form>函數

　　<select ng-app="Select" ng-controller="ctrl" ng-model="current" ng-options="v.value as v.name for v in data"></select>工具

　　<div ng-app="demo" ng-controller="ctrl">
　　　　<input type="checkbox" ng-model="ball.basketball" ng-ture-value="1" ng-false-value="0">籃球<input type="checkbox" ng-model="ball.football" ng-true-value="1" ng-false-value="0">足球
　　　　<div ng-if="ball.basketball==1">喜歡籃球的緣由：<textarea style="height: 100px;width: 300px;"></textarea></div>
　　　　<div ng-if="ball.football==1">喜歡足球的緣由：<textarea style="height: 100px;width: 300px;"></textarea></div>
　　</div>學習

　　　　<div ng-app="angularJS1" ng-controller="ctrl">
　　　　　　商城狀態：<input type="radio" ng-model="status" value="1">打開<input type="radio" ng-model="status" value="0">關閉
　　　　　　<textarea style="width: 300px;height: 200px;" ng-show="status==0">商城正在系統升級，給你帶來不便，敬請諒解，1個月後再來訪問吧</textarea>this

　　　　</div>雙向綁定

　　　　<div ng-app="angularJS" ng-controller="ctrl">商品名稱：{{data.title}},商品價格：{{data.price}},商品數量：<button ng-click="decrease()">-</button><input type="text" name="text" ng-model='data.num'><button ng-click="increase()">+</button>,商品總價：{{data.price*data.num}},數量：{{data.num}}
　　　　　　<br>
　　　　　　<input type="text" name="text" ng-model="name"><br>
　　　　　　<input type="text" name="text" ng-model="name">
　　　　　　<form>
　　　　　　　　商品名稱：<input type="text" name="text" ng-model="data.title">
　　　　　　　　商品價格：<input type="text" name="text" ng-model="data.price">
　　　　　　　　商品數量：<input type="text" name="text" ng-model="data.num">
　　　　　　　　商品總價：<input type="text" name="text" ng-value="data.num*data.price">
　　　　　　</form>

　　　　</div>

　　　　let m=angular.module('You',[]);
　　　　m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.title="The 1000phone education";
　　　　　　$scope.isShow=true;
　　　　　　$scope.toggle=function(){
　　　　　　　　$scope.isShow=!$scope.isShow;
　　　　　　}
　　　　　　$scope.isDisabled=true;
　　　　　　$scope.toggleDisabled=function(){
　　　　　　　　$scope.isDisabled=!$scope.isDisabled;
　　　　　　}

　　　　}]);

　　　　let m=angular.module('Submit',[]);
　　　　m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.title="千瘋教育";
　　　　　　$scope.content="上海H51615班級第二階段的學習快結束啦！";
　　　　　　var oQianfeng=document.qianfeng;
　　　　　　oQianfeng.onsubmit=function(){
　　　　　　　　console.log(this.title.value.length);
　　　　　　　　console.log($scope.title.length);
　　　　　　};
　　　　}]);

　　　　var m=angular.module('Select',[])
　　　　m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.current="1";
　　　　　　　　$scope.data=[{
　　　　　　　　　　　　　　name:"劉德華",
　　　　　　　　　　　　　　value:"1"
　　　　　　　　　　　　},{
　　　　　　　　　　　　　　name:"張學友",
　　　　　　　　　　　　　　value:"2"
　　　　　　　　　　　　},{
　　　　　　　　　　　　　　name:"郭富城",
　　　　　　　　　　　　　　value:"3"
　　　　　　　　　　　　},{
　　　　　　　　　　　　　　name:"黎明",
　　　　　　　　　　　　　　value:"4"
　　　　　　　　}];
　　　　}])

　　　　let m=angular.module('demo',[]);
　　　　m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.ball={football:0,basketball:0};
　　　　}])

　　　　var m=angular.module('angularJS1',[]);
　　　　m.controller('ctrl', ['$scope', function ($scope) {
　　　　　　　　$scope.status=1;
　　　　}])

　　　　//第一步建立模塊，包括模塊名字和一個空數組
　　　　let m=angular.module('angularJS',[]);
　　　　//第二步，建立一個控制器，包括控制器名字和一個數組，數組裏包括視圖(從後臺獲取數據的東西)名字和一個函數
　　　　m.controller('ctrl',['$scope',function($scope){
　　　　　　$scope.data={
　　　　　　　　id:1,
　　　　　　　　title:"蘋果",
　　　　　　　　price:18,
　　　　　　　　num:1
　　　　　　};
　　　　　　$scope.decrease=function(){
　　　　　　　　if($scope.data.num>0) $scope.data.num--;
　　　　　　}
　　　　　　$scope.increase=function(){
　　　　　　　　$scope.data.num++;
　　　　　　}
　　　　　　$scope.name='京東商城';

　　　　}])

</script>
</body>

</html>

　　　　/*AngularJS指令及註釋*/　　　　1,ng-bind;//ng-bind與表達式{{}}是同一種工具，都能將數據插入到頁面中，當數據後面的字符串比較長時使用{{}},可是當使用表達式{{}}，網速比較慢的時候頁面會有{{}}閃退，解決辦法是加class="ng-cloak",再在css中讓其none".ng-cloak{display:none}"便可解決；注：不能用於form表單　　　　2,ng-cloak;　　　　3,ng-model;//其指令中的值發生變化之後，會及時更新到$scope中，$scope中的值發生變化之後，則從新解析頁面中使用到該指令的值　　　　4,ng-value;//用於設置form表單或select中的value值，不會發生雙向綁定　　　　5,ng-show;//原理是經過控制css樣式肯定元素是否顯示　　　　6,ng-hide;　　　　7,ng-if;//控制元素是否顯示，原理是將元素從DON節點中刪除　　　　8,ng-disabled;//控制表單是否禁止使用　　　　9,ng-repeat;//按值索引，並不是按下標索引，當數組中有重複的數據時，必須指定no-repeat='v in shops track by $index',不然報錯;$index是ng自帶的變量，表示當前數據的下標值　　　　10,ng-selected;//指定被選中的option標籤元素，爲true時表示選中當前標籤　　　　11,ng-readonly/ng-disabled;//禁止用戶修改表單元素,使用disabled屬性的表單數據不能提交到後臺，而使用readonly屬性的表單數據是能夠提交到後臺的；　　　　12,ng-checked;//表示表單元素是否被選中　　　　13,ng-class/ng-class-odd/ng-class-even;//ng-class綁定angular數據，指令的值爲Json對象，若是屬性爲true,則使用對應屬性名的class樣式；ng-class-odd/ng-class-even奇偶數行應用的類　　　　14,ng-style;//設置行級樣式　　　　15,ng-click='';ng-change=''(必須指定ng-model,不然報錯)；ng-dblclick;ng-keydown;ng-keyup;ng-keypress;ng-mousedown;ng-mouseup;ng-mousemove;//事件處理指令,格式：ng-click="fn()(函數名)"　　　　16,ng-init;//不經常使用，執行給定的表達式　　　　17,ng-trim;//指令用來設置是否打開自動移除字符串兩側的空白字符；注：a：ng-model指令會自動移除文本框內容兩側的空白字符，而不會移除密碼框內容兩側的空白字符，如不須要該功能，則設置ng-trim指令值爲false；b：ng-model只會移除文本框內容幫定到$scope對象屬性上的值的兩側空白字符，而文本框的value值仍是會包含兩側的空白字符；　　　　18,ng-true-value;//用於設置複選框被選中時的值。　　　　19,ng-false-value;//指令用於設置複選框取消選中時的值，若是沒有使用這兩個指令設置，那麼選中複選框時的值爲true，取消選中時的值爲false。　　　　20,ng-options;//指令用於構建select下拉列表，被選中的值須要存儲到ng-model指令指定的變量中;