指令：ng-app?標記在dom上，就作用于該dom結構

?

===========================================

定義初始值??指令：ng-init

??<div?ng-app="" ng-init="quantity=1;price=5">

{{quantity}}{{price}}

</div>??——>???15

===========================================

數據綁定可放表達式：

<div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">

?

名字為：?{{ names[0] }}

?

</div>???——>???名字為：Tom

===========================================

?

指令：ng-model

?

<div ng-app="">

?

請輸入任意值：<input type="text" ng-model="name" />

?

你輸入的為：?{{ name }}

?

</div>??——>??當在input內輸入對應的值，{{name}}也會相對改變。

===========================================

指令：ng-bind

?

<div ng-app="">

????請輸入一個名字：<input type="text" ng-model="name" />

????Hello?<span ng-bind="name"></span>

</div>??????——>?指令ng-bind和AngularJS表達式{{}}有異曲同工之妙，但不同之處就在于ng-bind是在angular解析渲染完畢后才將數據顯示出來的。

===========================================

指令：ng-click

?

<div ng-app="" ng-init="click=false">

????<button?ng-click="click= !click">隱藏/顯示</button>

????<div?ng-hide="click">

????????請輸入一個名字：<input type="text" ng-model="name" />

????????Hello <span ng-bind="name"></span>

????</div>

</div>??——>點擊事件

===========================================

使用MVVM模式有幾大好處：

?

1.?低耦合：View可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。

?

可重用性：可以把一些視圖的邏輯放在ViewModel里面，讓很多View重用這段視圖邏輯。

?

獨立開發：開發人員可以專注與業務邏輯和數據的開發(ViewModel)。設計人員可以專注于界面(View)的設計。

?

可測試性：可以針對ViewModel來對界面(View)進行測試。

===========================================

?

指令?ng-controller?

?

<div ng-app="" ng-controller="MyController">

?

請輸入一個名字：<input type="text" ng-model="person.name">

?

Hello <span ng-bind="person.name"></span>

?

</div>???

?

<script>

function MyController($scope) {

???$scope.person?= {

??????name:?"World"

???};

}

</script>????——>在dom上綁定對應的控制器，使用$scope來繼承。

===========================================

常用指令

?

指令?ng-hide

?

用于控制部分HTML元素可見(ng-hide="false")和不可見狀態(ng-hide="true”)。

?

<div ng-app="" ng-init="click=false">

??<button?ng-click="click= !click">我變</button>

??<p?ng-hide="click">顯示了。</p>

??<p?ng-hide="!click">隱藏了。</p>

</div>?????——>?點擊“我變”，在click和!click之間切換，引號內的’click’?變量，可以自定義，與下面的ng-hide對應做判斷。

===========================================

指令?ng-repeat

遍歷一個數據集合中的每個數據元素，并且加載HTML模版把數據渲染出來

<div ng-app="" ng-init="friends = [

???{name:'Tom',?age:25},

???{name:'Jerry',?age:28},

???{name:'Tom',?age:25},

???{name:'Jerry',?age:28}]">

?

???<table>

?????<tr?ng-repeat="x in friends">

???????<td>?{{ 'Name：'+ x.name +'?，Age：'+ x.age}} </td>

?????</tr>

???</table>

</div>??

——>

????????Name：Tom?，Age：25

????????Name：Jerry?，Age：28

????????Name：Tom?，Age：25

????????Name：Jerry?，Age：28

===========================================

?

過濾器

用法：管道字符(|)+過濾器名。

<div ng-app="">

????請輸入: <input type="text" ng-model="name">

????結果為：?{{ name | uppercase}}???//

</div>???????——>’uppercase’把字母過濾成大寫、’lowercase’把字母過濾成小寫；

===========================================

?

<div ng-app="" ng-init="friends = [

???{name:'tom',?age:16},

???{name:'jerry',?age:20},

???{name:'garfield',?age:22}]">

?

????輸入過濾:<input type="text" ng-model="name" >

????<ul?style="list-style-type:none">

????????<li>???姓名，年齡</li>

????????<li??ng-repeat="x?in friends | filter:name">??

????????????{{?x.name + ' , ' + x.age }}

????????</li>

????</ul>???

</div>????——>對li下得內容進行變化，過濾器中的name與input內的輸入值進行綁定。

===========================================

轉載于:https://www.cnblogs.com/raines/p/5154182.html

總結

以上是生活随笔為你收集整理的Angular复习笔记（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。