重溫AngularJS（一）-- 表達(dá)式、指令

關(guān)聯(lián)目錄索引：
重溫AngularJS（一）-- 表達(dá)式、指令
重溫AngularJS（二）-- 模型ng-model指令
重溫AngularJS（三）-- Scope(作用域)
重溫AngularJS（四）-- 控制器ng-controller
重溫AngularJS（五）-- 過(guò)濾器
重溫AngularJS（六）-- 服務(wù)Service
重溫AngularJS（七）-- Select(選擇框)、表格
重溫AngularJS（八）-- 事件
重溫AngularJS（九）-- 模塊、全局API
重溫AngularJS（十）-- 表單、輸入驗(yàn)證
重溫AngularJS（十一）-- 包含、動(dòng)畫(huà)
重溫AngularJS（十二）-- 依賴注入（5個(gè)核心組件）
重溫AngularJS（十三）-- 路由

作者：Zyao89；轉(zhuǎn)載請(qǐng)保留此行，謝謝；

AngularJS 簡(jiǎn)介

AngularJS 是一個(gè) JavaScript 框架。它可通過(guò) <script> 標(biāo)簽添加到 HTML 頁(yè)面。
AngularJS 通過(guò) [指令] 擴(kuò)展了 HTML，且通過(guò) [表達(dá)式] 綁定數(shù)據(jù)到 HTML。

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

各個(gè) angular.js 版本下載： https://github.com/angular/angular.js/releases

AngularJS 表達(dá)式

AngularJS 表達(dá)式寫(xiě)在雙大括號(hào)內(nèi)：{{ expression }}。
AngularJS 表達(dá)式把數(shù)據(jù)綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達(dá)式書(shū)寫(xiě)的位置"輸出"數(shù)據(jù)。
AngularJS 表達(dá)式 很像 JavaScript 表達(dá)式：它們可以包含文字、運(yùn)算符和變量。

AngularJS 數(shù)字

<div ng-app="" ng-init="quantity=1;cost=5">
 
<p>總價(jià)： {{ quantity * cost }}</p>
 
</div>

使用 ng-bind 的相同實(shí)例：

<div ng-app="" ng-init="quantity=1;cost=5">
 
<p>總價(jià)： <span ng-bind="quantity * cost"></span></p>
 
</div>

AngularJS 字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
 
<p>姓名： {{ firstName + " " + lastName }}</p>
 
</div>

使用 ng-bind 的相同實(shí)例：

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
 
<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
 
</div>

AngularJS 對(duì)象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
 
<p>姓為 {{ person.lastName }}</p>
 
</div>

使用 ng-bind 的相同實(shí)例：

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
 
<p>姓為 <span ng-bind="person.lastName"></span></p>
 
</div>

AngularJS 數(shù)組

<div ng-app="" ng-init="points=[1,15,19,2,40]">
 
<p>第三個(gè)值為 {{ points[2] }}</p>
 
</div>

使用 ng-bind 的相同實(shí)例：

<div ng-app="" ng-init="points=[1,15,19,2,40]">
 
<p>第三個(gè)值為 <span ng-bind="points[2]"></span></p>
 
</div>

使用 ng-init 不是很常見(jiàn)。后面將有一個(gè)更好的初始化數(shù)據(jù)的方式。

AngularJS 指令

AngularJS 指令是擴(kuò)展的 HTML 屬性，帶有前綴 ng-。
ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序。
ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。
ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。
更多指令

ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應(yīng)用程序 的"所有者"。
一個(gè)網(wǎng)頁(yè)可以包含多個(gè)運(yùn)行在不同元素中的 AngularJS 應(yīng)用程序。

數(shù)據(jù)綁定

兩個(gè)文本域是通過(guò)兩個(gè) ng-model 指令同步的：

<div ng-app="" ng-init="quantity=1;price=5">
 
<h2>價(jià)格計(jì)算器</h2>
 
數(shù)量： <input type="number"    ng-model="quantity">
價(jià)格： <input type="number" ng-model="price">
 
<p><b>總價(jià)：</b> {{ quantity * price }}</p>
 
</div>

重復(fù) HTML 元素

ng-repeat 指令會(huì)重復(fù)一個(gè) HTML 元素：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 來(lái)循環(huán)數(shù)組</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

ng-repeat 指令用在一個(gè)對(duì)象數(shù)組上：

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
 
<p>循環(huán)對(duì)象：</p>
<ul>
  <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
 
</div>

ng-app 指令

ng-app 指令定義了 AngularJS 應(yīng)用程序的 根元素。
ng-app 指令在網(wǎng)頁(yè)加載完畢時(shí)會(huì)自動(dòng)引導(dǎo)（自動(dòng)初始化）應(yīng)用程序。

ng-init 指令

ng-init 指令為 AngularJS 應(yīng)用程序定義了 初始值。
通常情況下，不使用 ng-init。您將使用一個(gè)控制器或模塊來(lái)代替它。

ng-model 指令

ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)。
ng-model 指令也可以：

  • 為應(yīng)用程序數(shù)據(jù)提供類(lèi)型驗(yàn)證（number、email、required）。
  • 為應(yīng)用程序數(shù)據(jù)提供狀態(tài)（invalid、dirty、touched、error）。
  • 為 HTML 元素提供 CSS 類(lèi)。
  • 綁定 HTML 元素到 HTML 表單。

ng-repeat 指令

ng-repeat 指令對(duì)于集合中（數(shù)組中）的每個(gè)項(xiàng)會(huì) 克隆一次 HTML 元素。

創(chuàng)建自定義的指令

除了 AngularJS 內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令。
你可以使用 app.directive 函數(shù)來(lái)添加自定義的指令。
要調(diào)用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峰法來(lái)命名一個(gè)指令， runoobDirective, 但在使用它時(shí)需要以 - 分割, runoob-directive:

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定義指令!</h1>"
    };
});
</script>

</body>

你可以通過(guò)以下方式來(lái)調(diào)用指令：

  • 元素名
    <runoob-directive></runoob-directive>
  • 屬性
    <div runoob-directive></div>
  • 類(lèi)名
    <div class="runoob-directive"></div>
  • 注釋

限制使用

你可以限制你的指令只能通過(guò)特定的方式來(lái)調(diào)用。

通過(guò)添加 restrict 屬性,并設(shè)置只值為 "A", 來(lái)設(shè)置指令只能通過(guò)屬性的方式來(lái)調(diào)用:

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定義指令!</h1>"
    };
});

HTML DOM

AngularJS 為 HTML DOM 元素的屬性提供了綁定應(yīng)用數(shù)據(jù)的指令。

ng-disabled 指令

ng-disabled 指令直接綁定應(yīng)用程序數(shù)據(jù)到 HTML 的 disabled 屬性。

<div ng-app="" ng-init="mySwitch=true">

<p>
  <button ng-disabled="mySwitch">點(diǎn)我!</button>
</p>

<p>
  <input type="checkbox" ng-model="mySwitch">按鈕
</p>

<p>
  {{ mySwitch }}
</p>

</div>

分析：
ng-disabled 指令綁定應(yīng)用程序數(shù)據(jù) "mySwitch" 到 HTML 的 disabled 屬性。
ng-model 指令綁定 "mySwitch" 到 HTML input checkbox 元素的內(nèi)容（value）。

如果 mySwitch 為true, 按鈕將不可用:

<p>
  <button disabled>點(diǎn)我！</button>
</p>

如果 mySwitch 為false, 按鈕則可用:

<p>
  <button>點(diǎn)我!</button>
</p>

ng-show 指令

ng-show 指令隱藏或顯示一個(gè) HTML 元素。

<div ng-app="">

  <p ng-show="true">我是可見(jiàn)的。</p>

  <p ng-show="false">我是不可見(jiàn)的。</p>

</div>

ng-show 指令根據(jù) value 的值來(lái)顯示（隱藏）HTML 元素。
你可以使用表達(dá)式來(lái)計(jì)算布爾值（ true 或 false）:

<div ng-app="" ng-init="hour=13">
 
<p ng-show="hour > 12">我是可見(jiàn)的。</p>
 
</div>

ng-hide 指令

ng-hide 指令用于隱藏或顯示 HTML 元素。

<div ng-app="">

  <p ng-hide="true">我是不可見(jiàn)的。</p>

  <p ng-hide="false">我是可見(jiàn)的。</p>

</div>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容