Angularjs系列之常用內建指令
2.4.1. 常用內建指令
常用內建指令有一些獨特的性質。雖然可用表示式生成HTML程式碼從而與它們等效，但這些做法都是不推薦的。
ng-href
當使用當前作用域中的屬性動態建立URL時，應該用ng-href代替href。Angular.js表示式可以設定大部分HTML元素的屬性或者值，但單獨設定錨鏈接的href屬性是不可以的。這裡的潛在問題是當用戶點選一個由插值動態生成的連結時，如果插值尚未生效，將會跳轉到錯誤的頁面（通常是404）。
ng-src
與ng-href同理，AngularJS會告訴瀏覽器在 ng-src
ng-disabled
使用 ng-disabled 可以把 disabled 屬性繫結到各表單輸入欄位上。當寫普通的HTML輸入欄位時，如果在元素標籤上出現了 disabled 屬性就會禁用這個輸入欄位。
ng-checked
標準的 checked 屬性是一個布林屬性，不需要進行賦值。通過 ng-checked 將某個表示式同是否出現checked屬性進行繫結。要與ng-model聯合使用才有效果。
ng-readonly
同其他布林屬性一樣，HTML定義只會檢查 readonly 屬性是否出現，而不是它的實際值。通過 ng-readonly 可以將某個返回真或假的表示式同是否出現 readonly 屬性進行繫結：
ng-selected
可以對是否出現 option 標籤的 selected 屬性進行繫結。
ng-include
載入、編譯幷包含外部HTML片段到當前的應用中。模板的URL被限制在與應用文件相同的域和協議下，可以通過白名單或包裝成被信任的值來突破限制。更進一步，需要考慮跨域資源共享（
ng-switch
和 ng-switch-when 及 on="propertyName" 一起使用，可以在 propertyName 發生變化時渲染不同指令到檢視中。
ng-if
根據表示式的值在DOM中生成或移除一個元素。同 no-show 和 ng-hide 指令最本質的區別是，它不是通過CSS顯示或隱藏DOM節點，而是真正生成或移除節點。
ng-repeat
遍歷一個集合或為集合中的每個元素生成一個模板例項。集合中的每個元素都會被賦予自己的模板和作用域。同時每個模板例項的作用域中都會暴露一些特殊的屬性。$index ：遍歷的進度（0... length-1 ）。$first：當元素是遍歷的第一個時值為 true。$middle：當元素處於第一個和最後元素之間時值為 true$last：當元素是遍歷的最後一個時值為true。$even：當 $index 值是偶數時值為 true 。$odd ：當 $index 值是奇數時值為true。
ng-init
在指令被呼叫時設定內部作用域的初始狀態。
ng-bind
儘管可以在檢視中使用 {{ }} 模板語法（AngularJS內建的方式），我們也可以通過 ng-bind指令實現同樣的行為。內容會被當作子文字節點渲染到含有 ng-bind 指令的元素內。
ng-cloak
除使用 ng-bind 來避免未渲染元素閃爍，還可以在含有 {{ }} 的元素上使用 ng-cloak 指令。ng-cloak 指令會將內部元素隱藏，直到路由呼叫對應的頁面時才顯示出來。
ng-bind-template
同 ng-bind 指令類似， ng-bind-template 用來在檢視中繫結多個表示式。
ng-model
將 input、select、text area 或自定義表單控制元件同包含它們的作用域中的屬性進行繫結。它可以提供並處理表單驗證功能，在元素上設定相關的CSS類（ng-valid、ng-invalid等），並負責在父表單中註冊控制元件。
ng-show/ng-hide
根據所給表示式的值來顯示或隱藏HTML元素。當賦值給 ng-show 指令的值為 false 時元素會被隱藏。類似地，當賦值給 ng-hide 指令的值為 true 時元素也會被隱藏。
ng-change
在表單輸入發生變化時計算給定表示式的值。因為要處理表單輸入，這個指令要和 ngModel 聯合起來使用。
ng-form
在一個表單內部巢狀另一個表單。普通的HTML <form> 標籤不允許巢狀，但ng-form 可以。內部所有的子表單都合法時，外部的表單才會合法。CSS類會根據表單的驗證狀態自動設定：表單合法時設定 ng-valid；表單不合法時設定 ng-invlid；表單未進行修改時設定 ng-pristion；表單進行過修改時設定 ng-dirty。
Angular不會將表單提交到伺服器，除非它指定了action屬性。要指定提交表單時呼叫哪個JavaScript方法，使用下面兩個指令中的一個。ng-submit：在表單元素上使用。ng-click：在第一個按鈕或submit型別（input[type=submit]）的輸入欄位上使用。
ng-click
指定一個元素被點選時呼叫的方法或表示式。
ng-select/ng-options
將資料同HTML的 <select> 元素進行繫結。這個指令可以和 ng-model 以及ng-options 指令一同使用，ng-options 的值可以是一個內涵表示式（comprehension expression），它可以接受一個數組或物件，並對它們進行迴圈，將內部的內容提供給select 標籤內部的選項。陣列作為資料來源：用陣列中的值做標籤；用陣列中的值作為選中的標籤；用陣列中的值做標籤組；用陣列中的值作為選中的標籤組。物件作為資料來源：用物件的鍵值（key-value）做標籤；用物件的鍵值作為選中的標籤；用物件的鍵值作為標籤組；用物件的鍵值作為選中的標籤組。
ng-class
style內不能使用angularjs表示式。使用 ng-class 動態設定元素的類，方法是繫結一個代表所有需要新增的類的表示式。重複的類不會新增。當表示式發生變化，先前新增的類會被移除，新類會被新增。ng-class-even和ng-class-odd是AngularJS內建支援奇偶行不同外觀的樣式，內建CSS樣式名是.even和.odd。程式碼正規化：
ng-class="{CSS樣式名:關係表示式,...}"
注意只有一個尖括號，不能不寫尖括號，也不能寫兩個尖括號。
ng-style
把鍵值符合層疊樣式表的物件賦給style。
ng-submit
將表示式同 onsubmit 事件進行繫結。這個指令同時會阻止預設行為（傳送請求並重新載入頁面），除非表單不含有 action 屬性。
ng-attr-(suffix)
當AngularJS編譯DOM時會查詢花括號 {{ some expression }} 內的表示式。這些表示式會被自動註冊到 $watch 服務中並更新到 $digest 迴圈中，成為它的一部分。有時瀏覽器會對屬性會進行很苛刻的限制。SVG就是一個例子。
<svg>
<circle cx="{{ cx }}"></circle>
</svg>
執行上面的程式碼會丟擲一個錯誤，指出我們有一個非法屬性。可以用 ng-attr-cx 來解決這個問題。注意， cx 位於這個名稱的尾部。在這個屬性中，通過用 {{ }} 來寫表示式，達到前面提到的目的。
<svg>
<circle ng-attr-cx="{{ cx }}"><circle>
</svg>
示例工程：T91。
HTML程式碼：
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title>T91</title>
<script type="text/javascript" src="../vendor/angular.js"></script>
<script type="text/javascript" src="../controllers/hello.js"></script>
</head>
<body ng-controller="HelloController">
<h1 align="center">
AngularJS常用內建指令
</h1>
<table border="1px" cellspacing="0" cellpadding="5" rules="all" style="border:solid 1px #0000FF" width="100%" align="center">
<tr>
<td width="25%" align="right">連結：</td>
<td width="75%">
當錨鏈接的連結指向的是作用域的變數時，錯誤的用法：<a href="{{href1}}">我的部落格</a></li>。
正確的用法：<a ng-href="{{href2}}">我的部落格</a>
</td>
</tr>
<tr>
<td align="right">圖片：</td>
<td valign="center">
<div style="height: 64px;vertical-align: middle;line-height: 64px;float:left">這個後臺報錯：</div>
<img style="float: left;" width="64px" height="64px" src="{{imgSrc1}}">
<div style="height: 64px;vertical-align: middle;line-height: 64px;float:left">，沒問題的：</div>
<img width="64px" height="64px" ng-src="{{imgSrc2}}">
</td>
</tr>
<tr>
<td align="right">啟用與禁用：</td>
<td>
<button style="width:80px;height: 30px;" ng-click="onButton1Clicked(this)" ng-disabled="isButton1Disabled">{{button1Tip}}</button>
</td>
</tr>
<tr>
<td align="right">只讀</td>
<td><textarea style="width:98%" rows="5" ng-readonly="isTextarea1Readonly"></textarea></td>
</tr>
<tr>
<td align="right">複選框的值：</td>
<td><input type="checkbox"
value="再點我一下"
ng-init="checkbox1Value=true"
ng-model="checkbox1Value"
ng-checked="checkbox1Value"></td>
</tr>
<tr>
<td align="right">下拉列表框：</td>
<td>
<label>選中橘子：<input type="checkbox" ng-model="isSelectedSecond"></label>
<select ng-readonly="true" ng-disabled="true">
<option>蘋果</option>
<option ng-selected="isSelectedSecond" >橘子</option>
<option>桃子</option>
</select>
</td>
</tr>
<tr>
<td align="right">包含網頁：</td>
<td>
<div ng-include="include.html" ng-controller="IncludeController" ng-init="name='李婷'">
你好,{{name}}
</div>
</td>
</tr>
<tr>
<td align="right">ng-switch：</td>
<td>
<input type="text" ng-model="person1.name" style="float: left;"/>
<div ng-switch on="person1.name" style="float: left;">
<span ng-switch-default>勝利者是：</span>
<span ng-switch-when="李婷">{{ person1.name }}</span>
</div>
</td>
</tr>
<tr>
<td align="right">ng-if：</td>
<td>
<button style="float:left" ng-click="onNgif1Clicked()">增加</button>
<span style="float:left">{{ngif1}}</span>
<div ng-if="ngif1%2==0" style="float:left;color:blue">當數字是偶數的時候你才看得見我。</div>
</td>
</tr>
<tr>
<td align="right">ng-repeat：</td>
<td>
<table width="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>序號</th>
<th>值</th>
<th>第一個</th>
<th>中間</th>
<th>最後</th>
<th>偶數</th>
<th>奇數</th>
</tr>
<tr ng-repeat="ng in ngrepeat1">
<td align="center">{{$index}}</td>
<td align="center">{{ng}}</td>
<td align="center">{{$first}}</td>
<td align="center">{{$middle}}</td>
<td align="center">{{$last}}</td>
<td align="center">{{$even}}</td>
<td align="center">{{$odd}}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right">ng-init：</td>
<td><p ng-init="nginit1='你好，我在HTML中初始化的'">{{nginit1}}</p></td>
</tr>
<tr>
<td align="right">ng-bind：</td>
<td><p ng-bind="ngbind1"></p></td>
</tr>
<tr>
<td align="right">ng-cloak：</td>
<td><p ng-cloak>{{ngcloak1}}</p></td>
</tr>
<tr>
<td align="right">ng-bind-template：</td>
<td><p ng-bind-template="{{ngtemplate1}}{{ngtemplate2}}"></p></td>
</tr>
<tr>
<td align="right">ng-show/ng-hide：</td>
<td>
<span ng-show="ngshow1">你好</span><button ng-click="onNgshow1Clicked()" style="width:80px;height: 30px;">切換</button>
<span ng-hide="nghide1">ng-show和ng-hide</span><button ng-click="onNghide1Clicked()" style="width:80px;height: 30px;">顯隱</button>
</td>
</tr>
<tr>
<td align="right">ng-options1：</td>
<td><div>
<select ng-model="options1"
ng-options="options1.name for options1 in ngoptions1">
<option value="">選擇一個城市</option>
</select>
你最喜歡的城市: {{ options1.name }}
</div></td>
</tr>
<tr>
<td align="right">ng-attr-(stuff)：</td>
<td>
<table>
<tr><td>
<svg width="300" height="100" version="1.1" >
<circle cx="{{ngstuff1}}" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</td><td>
<svg width="300" height="100" version="1.1" >
<circle ng-attr-cx="{{ngstuff1}}" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
JS程式碼：
var module=angular.module("myApp",[]);
module.controller("HelloController",function($scope,$timeout){
$scope.button1Tip="點我試試";
$scope.isButton1Disabled=false;
$scope.isTextarea1Readonly=false;
$scope.checkbox1Value=false;
$scope.isSelectedSecond=false;
$scope.person1={
name:""
};
$scope.ngif1=1;
$scope.onButton1Clicked=function(dom){
$scope.href1="http://blog.csdn.net/caoshiying?viewmode=contents";
$scope.href2=$scope.href1;
$scope.imgSrc1="../images/ghl.jpg";
$scope.imgSrc2=$scope.imgSrc1;
console.log("已設定連結。");
$scope.isButton1Disabled=true;
$scope.isTextarea1Readonly=true;
$scope.button1Tip="不理你。";
};
$scope.$watch("checkbox1Value",function(){
console.log("複選框的值："+$scope.checkbox1Value);
});
$scope.onNgif1Clicked=function(){
$scope.ngif1+=1;
};
$scope.ngrepeat1=["杏","梨","桃","橘","蘋"];
$scope.ngbind1="我可以賦值為InnerHTML";
$scope.ngcloak1="我在路由呼叫的時候顯示的。"
$scope.ngtemplate1="你好，";
$scope.ngtemplate2="世界，template bind";
$scope.ngshow1=true;
$scope.nghide1=true;
$scope.onNgshow1Clicked=function(){
相關推薦
Angularjs系列之常用內建指令
2.4.1. 常用內建指令 常用內建指令有一些獨特的性質。雖然可用表示式生成HTML程式碼從而與它們等效，但這些做法都是不推薦的。 ng-href 當使用當前作用域中的屬性動態建立URL時，應該用ng-href代替href。Angul
大資料入門教程系列之Hive內建函式及自定義函式
本篇文章主要介紹Hive內建函式以及自定義UDF函式和UDFT函式，自定義UDF函式通過一個國際轉換中文的例子說明。 操作步驟： ①、準備資料和環境 ②、演示Hive內建函式 ③、自定義UDF函式編寫、演示 詳細步驟： 一、準備資料和
angular.js常用內建指令
**指令，我將其理解為AngularJS操作HTML element的一種途徑。 AngularJS 指令是擴充套件的 HTML 屬性，帶有字首 ng-。** angularjs指令： 1.ngApp 寫法：ng-app ng-app 指令初
python之路--內建常用模組
1. 簡單的瞭解模組 你寫的每一個py檔案都是一個模組. 還有一些我們一直在使用的模組. buildins 內建模組. print, input. random 主要是和隨機相關的的內容 random() 隨機小數 uninform(a,b) 隨機小
ECMAScript 6 學習系列課程 （ES6 常用內建方法的使用）
在編寫Javascript的過程，我們經常會用到陣列過濾，字串等相關操作，比如會用到filter等方法，在ES6中同樣新增了很多內建方法，下面我們來了解一下。 Finding [ 1, 3, 4, 2 ].find(x => x > 3)
angularJS系列之指令directive應用例項
程式碼結構 html頁面程式碼 <!DOCTYPE html> <html ng-app="demoForDirective"> <head> <meta http-equiv="content-ty
AngularJs 常見內建指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS 指令</title> <!--
AngularJS內建指令示例——表單驗證
示例1： <html ng-app='TestFormModule'> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> &
Python基礎之十二常用內建模組
''' datetime datetime是Python處理日期和時間的標準庫 ''' ###########################獲取當前日期和時間 from datetime import datetime now =
AngularJS入門 AngularJS控制器 AngularJS常見內建指令
每一個AngularJS應用，都有唯一的一個全域性作用域範圍，也稱為根作用域，Angular中其他的作用域都 是這個根作用域的後代/子作用域。 AngularJS的根作用域/全域性作用域：$rootScope。 根作用域使用時，通過注入的方式新增到控制器處理函式的入參中。 $watch: $scope物
【十七】hive常用內建函式之String Functions
String Functions Return Type Name(Signature) Description Return
AngularJs內建指令
ng-app 每一次用AngularJS都離不開這個指令，順便說下$rootScope。聲明瞭ng-app的元素會成為$rootScope的起點，而$rootScope是作用域鏈的根， 通常宣告在<html>你懂的。也就是說根下的作用域都可以訪問它。但是，
AngularJs內建指令大全
1、ng-model 這個大家都非常熟悉了，就是將表單控制元件和當前作用域的屬性進行繫結。需要注意繫結的scope的範圍（父scope與子scope）。 ng-model主要繫結的元素包括input， select， textarea ng-model的元素都有ng-valid（可用）
Java虛擬機系列之Java內存結構簡介
內存空間 指示器 私有 以及 並且 內存區域 在服務器 規範 基礎 本文我們將講解Java虛擬機中各個區域以及各個區域的作用。 一.程序計數器什麽是程序計數器，有什麽作用？程序技術器是一塊比較小的內存區域，主要當做是線程中所執行的字節碼的行號指示器，字節碼解釋器工作時就是通
8.7 每日課後作業系列之常用模板(介紹和運用)
ali baidu not in {} int time 緩存 date 方式 # 今日作業：# p1.簡述# 什麽是模塊#一系列功能的集合體# 模塊有哪些來源# p1.內置# 2.第三方# 3.自定義# 模塊的格式要求有哪些# p1 .py文件# 2 已被編譯為共享庫或D
angularjs系列之run方法操作
1、$scope.$apply的使用,源生跟angular的結合使用，如果沒有使用$timeout,則使用$scope.$apply，這樣操作$scope下面的變數值的變化，介面上對應的值才會有相應的變化； <!DOCTYPE html> <html lang="en" ng-a
Vue內建指令
1、v-bind：響應並更新DOM特性；例如：v-bind:href v-bind:class v-bind:title 等等 主要用法是繫結屬性，動態更新HTML元素上的屬性； 1 2 3 4 5 6 7 8 9 10 11
Python中常用內建屬性：__getattribute__屬性攔截器使用詳解
因為python中所有類預設繼承object類。而object類提供了了很多原始的內建屬性和方法，所以使用者自定義的類在Python中也會繼承這些內建屬性。可以使用dir()函式可以檢視，雖然python提供了很多內建屬性但實際開發中常用的不多。而很多系
MySQL 常用內建函式與所有內建函式
MySQL 常用內建函式 【數值函式】 Abs(X) //絕對值abs(-10.9) = 10 Format(X，D) //格式化千分位數值format(1234567.456, 2) =1,234,567.46 Ceil(X) //向上取整ceil(10.1) = 11 Floor(X) //
常用內建函式
dir：檢視當前物件的可呼叫的函式。 help：檢視當前函式的幫助文件 字串： lower()：所有的大寫字母轉換成小寫 upper()：所有的小寫字母轉換成大寫 swapcase()：大寫變小寫，小寫變大寫 title()