AngularJS 模型+Scope(作用域)+控制器+過(guò)濾器

AngularJS ng-model 指令模型)

ng-model 指令用于綁定應(yīng)用程序數(shù)據(jù)到 HTML 控制器(input, select, textarea)的值次企。


ng-model 指令
ng-model 指令可以將輸入域的值與 AngularJS 創(chuàng)建的變量綁定。

// AngularJS 實(shí)例
<div ng-app="myApp" ng-controller="myCtrl">    
    名字: <input ng-model="name">
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {    
      $scope.name = "John Doe";
  });
</script>

嘗試一下 ?


雙向綁定
雙向綁定,在修改輸入域的值時(shí)舔痕, AngularJS 屬性的值也將修改:

// AngularJS 實(shí)例
<div ng-app="myApp" ng-controller="myCtrl">    
    名字: <input ng-model="name">    
    <h1>你輸入了: {{name}}</h1>
    <!-- 或者使用 ng-bind -->
    <h1>你輸入了: <span ng-bind="name"></span></h1>
</div>

嘗試一下 ?


驗(yàn)證用戶輸入

// AngularJS 實(shí)例
<form ng-app="" name="myForm">    
    Email:    
    <input type="email" name="myAddress" ng-model="text">    
    <span ng-show="myForm.myAddress.$error.email">不是一個(gè)合法的郵箱地址</span>
</form>

嘗試一下 ?
<small>以上實(shí)例中,提示信息會(huì)在 ng-show 屬性返回 true 的情況下顯示验残。</small>


應(yīng)用狀態(tài)
ng-model 指令可以為應(yīng)用數(shù)據(jù)提供狀態(tài)值(invalid, dirty, touched, error):

// AngularJS 實(shí)例
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">    
    Email:    
    <input type="email" name="myAddress" ng-model="myText" required>    
    <h1>狀態(tài)</h1>    
    {{myForm.myAddress.$valid}}    
    {{myForm.myAddress.$dirty}}    
    {{myForm.myAddress.$touched}}
</form>

嘗試一下 ?


CSS 類
ng-model 指令基于它們的狀態(tài)為 HTML 元素提供了 CSS 類:

// AngularJS 實(shí)例
<style>
input.ng-invalid {    
    background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">            
   輸入你的名字:    
   <input name="myAddress" ng-model="text" required>
</form>

嘗試一下 ?
ng-model 指令根據(jù)表單域的狀態(tài)添加/移除以下類:

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine


AngularJS Scope(作用域)

Scope(作用域) 是應(yīng)用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶忱反。
Scope 是一個(gè)對(duì)象,有可用的方法和屬性祝拯。
Scope 可應(yīng)用在視圖和控制器上甚带。


如何使用 Scope

當(dāng)你在 AngularJS 創(chuàng)建控制器時(shí),你可以將 $scope 對(duì)象當(dāng)作一個(gè)參數(shù)傳遞:

// AngularJS 實(shí)例
// 控制器中的屬性對(duì)應(yīng)了視圖上的屬性:
<div ng-app="myApp" ng-controller="myCtrl">
  <h1>{{carname}}</h1>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {    
    $scope.carname = "Volvo";
  });
</script>

嘗試一下 ?
<small>當(dāng)在控制器中添加 $scope 對(duì)象時(shí)佳头,視圖 (HTML) 可以獲取了這些屬性鹰贵。
視圖中,你不需要添加 $scope 前綴, 只需要添加屬性名即可康嘉,如: {{carname}}碉输。</small>


Scope 概述

AngularJS 應(yīng)用組成如下:

  • View(視圖), 即 HTML。
  • Model(模型), 當(dāng)前視圖中可用的數(shù)據(jù)亭珍。
  • Controller(控制器), 即 JavaScript 函數(shù)敷钾,可以添加或修改屬性。

scope 是模型肄梨。
scope 是一個(gè) JavaScript 對(duì)象阻荒,帶有屬性和方法,這些屬性和方法可以在視圖和控制器中使用峭范。
<small>AngularJS 實(shí)例
如果你修改了視圖财松,模型和控制器也會(huì)相應(yīng)更新:</small>

<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="name">
  <h1>我的名字是 {{name}}</h1>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {    
    $scope.name = "John Dow";
  });
</script>

嘗試一下 ?


Scope 作用范圍

了解你當(dāng)前使用的 scope 是非常重要的。
在以上兩個(gè)實(shí)例中纱控,只有一個(gè)作用域 scope辆毡,所以處理起來(lái)比較簡(jiǎn)單,但在大型項(xiàng)目中甜害, HTML DOM 中有多個(gè)作用域舶掖,這時(shí)你就需要知道你使用的 scope 對(duì)應(yīng)的作用域是哪一個(gè)。
<small>AngularJS 實(shí)例
當(dāng)我們使用 ng-repeat 指令時(shí)尔店,每個(gè)重復(fù)項(xiàng)都訪問(wèn)了當(dāng)前的重復(fù)對(duì)象:</small>

<div ng-app="myApp" ng-controller="myCtrl">
  <ul>    
    <li ng-repeat="x in names">{{x}}</li>    
  </ul>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {    
    $scope.names = ["Emil", "Tobias", "Linus"];
  });
</script>

嘗試一下 ?
<small>每個(gè) < li> 元素可以訪問(wèn)當(dāng)前的重復(fù)對(duì)象眨攘,這里對(duì)應(yīng)的是一個(gè)字符串, 并使用變量 x 表示嚣州。</small>


根作用域

所有的應(yīng)用都有一個(gè) $rootScope鲫售,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整個(gè)應(yīng)用中该肴。是各個(gè) controller 中 scope 的橋梁情竹。用 rootscope 定義的值,可以在各個(gè) controller 中使用匀哄。
<small>AngularJS 實(shí)例
創(chuàng)建控制器時(shí)秦效,將 $rootScope 作為參數(shù)傳遞雏蛮,可在應(yīng)用中使用:</small>

<div ng-app="myApp" ng-controller="myCtrl">
  <h1>{{lastname}} 家族成員:</h1>
  <ul>      
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
  </ul>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope, $rootScope) {    
    $scope.names = ["Emil", "Tobias", "Linus"];    
    $rootScope.lastname = "Refsnes";
  });
</script>


AngularJS 控制器

AngularJS 控制器 控制 AngularJS 應(yīng)用程序的數(shù)據(jù)。
AngularJS 控制器是常規(guī)的 JavaScript 對(duì)象阱州。


AngularJS 控制器

AngularJS 應(yīng)用程序被控制器控制挑秉。
ng-controller 指令定義了應(yīng)用程序控制器。
控制器是 JavaScript 對(duì)象苔货,由標(biāo)準(zhǔn)的 JavaScript 對(duì)象的構(gòu)造函數(shù) 創(chuàng)建犀概。
<small>AngularJS 實(shí)例</small>

<div ng-app="myApp" ng-controller="myCtrl">
    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
     姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {        
  $scope.firstName = "John";    $scope.lastName = "Doe";});</script>

嘗試一下 ?
<small>應(yīng)用解析:
AngularJS 應(yīng)用程序由 ng-app 定義。應(yīng)用程序在 <div> 內(nèi)運(yùn)行蒲赂。
ng-controller="myCtrl" ?屬性是一個(gè) AngularJS 指令阱冶。用于定義一個(gè)控制器。
myCtrl 函數(shù)是一個(gè) JavaScript 函數(shù)滥嘴。
AngularJS 使用$scope 對(duì)象來(lái)調(diào)用控制器木蹬。
在 AngularJS 中, $scope 是一個(gè)應(yīng)用對(duì)象(屬于應(yīng)用變量和函數(shù))若皱。
控制器的 $scope (相當(dāng)于作用域镊叁、控制范圍)用來(lái)保存AngularJS Model(模型)的對(duì)象。
控制器在作用域中創(chuàng)建了兩個(gè)屬性 (firstNamelastName)走触。
ng-model 指令綁定輸入域到控制器的屬性(firstName 和 lastName)晦譬。</small>


控制器方法

<small>上面的實(shí)例演示了一個(gè)帶有 lastName 和 firstName 這兩個(gè)屬性的控制器對(duì)象。
控制器也可以有方法(變量和函數(shù)):</small>
AngularJS 實(shí)例

<div ng-app="myApp" ng-controller="personCtrl">
    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>姓名: {{fullName()}}
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {    
      $scope.firstName = "John";    
      $scope.lastName = "Doe";    
      $scope.fullName = function() {        
      return $scope.firstName + " " + $scope.lastName;    
      }});
  </script>

嘗試一下 ?


外部文件中的控制器

<small>在大型的應(yīng)用程序中互广,通常是把控制器存儲(chǔ)在外部文件中敛腌。
只需要把 <script> 標(biāo)簽中的代碼復(fù)制到名為 personController.js 的外部文件中即可:
AngularJS 實(shí)例</small>

<div ng-app="myApp" ng-controller="personCtrl">
  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
  <br>
  Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>

嘗試一下 ?


其他實(shí)例
<small>以下實(shí)例創(chuàng)建一個(gè)新的控制器文件:

angular.module('myApp', []).controller('namesCtrl', function($scope) { 
  $scope.names = [ 
    {name:'Jani',country:'Norway'}, 
    {name:'Hege',country:'Sweden'}, 
    {name:'Kai',country:'Denmark'}
  ];
});

保存文件為 namesController.js:
然后,在應(yīng)用中使用控制器文件:
AngularJS 實(shí)例</small>

<div ng-app="myApp" ng-controller="namesCtrl">
  <ul>  
    <li ng-repeat="x in names">    
      {{ x.name + ', ' + x.country }}  
    </li>
  </ul>
</div>
<script src="namesController.js"></script>

嘗試一下 ?



AngularJS 過(guò)濾器

<small>過(guò)濾器可以使用一個(gè)管道字符(|)添加到表達(dá)式和指令中惫皱。</small>

AngularJS 過(guò)濾器

AngularJS 過(guò)濾器可用于轉(zhuǎn)換數(shù)據(jù):


表達(dá)式中添加過(guò)濾器

<small>過(guò)濾器可以通過(guò)一個(gè)管道字符(|)和一個(gè)過(guò)濾器添加到表達(dá)式中像樊。.
((下面的兩個(gè)實(shí)例,我們將使用前面章節(jié)中提到的 person 控制器))
uppercase 過(guò)濾器將字符串格式化為大寫:
AngularJS 實(shí)例

<div ng-app="myApp" ng-controller="personCtrl">
  <p>姓名為 {{ lastName | uppercase }}</p>
</div>

</small>
嘗試一下 ?
<small>lowercase 過(guò)濾器將字符串格式化為小寫:
AngularJS 實(shí)例</small>

<div ng-app="myApp" ng-controller="personCtrl">
  <p>姓名為 {{ lastName | lowercase }}</p>
</div>

嘗試一下 ?


currency 過(guò)濾器

<small>currency 過(guò)濾器將數(shù)字格式化為貨幣格式:
AngularJS 實(shí)例</small>

<div ng-app="myApp" ng-controller="costCtrl">
  <input type="number" ng-model="quantity">
  <input type="number" ng-model="price">
  <p>總價(jià) = {{ (quantity * price) | currency }}</p>
</div>

嘗試一下 ?


向指令添加過(guò)濾器

<small>過(guò)濾器可以通過(guò)一個(gè)管道字符(|)和一個(gè)過(guò)濾器添加到指令中旅敷。
orderBy 過(guò)濾器根據(jù)表達(dá)式排列數(shù)組:
AngularJS 實(shí)例</small>

<div ng-app="myApp" ng-controller="namesCtrl">
  <ul>  
    <li ng-repeat="x in names | orderBy:'country'">    
      {{ x.name + ', ' + x.country }}  
    </li>
  </ul>
</div>

嘗試一下 ?


過(guò)濾輸入

<small>輸入過(guò)濾器可以通過(guò)一個(gè)管道字符(|)和一個(gè)過(guò)濾器添加到指令中生棍,該過(guò)濾器后跟一個(gè)冒號(hào)和一個(gè)模型名稱。
filter 過(guò)濾器從數(shù)組中選擇一個(gè)子集:
AngularJS 實(shí)例</small>

<div ng-app="myApp" ng-controller="namesCtrl">
  <p><input type="text" ng-model="test"></p>
  <ul>  
    <li ng-repeat="x in names | marked" style="border: 0px; margin: 0px; padding: 0px;">filter:test | orderBy:'country'">    
      {{ (x.name | uppercase) + ', ' + x.country }}  
    </li>
  </ul>
</div>

嘗試一下 ?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末媳谁,一起剝皮案震驚了整個(gè)濱河市涂滴,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌晴音,老刑警劉巖柔纵,帶你破解...
    沈念sama閱讀 221,273評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異锤躁,居然都是意外死亡首量,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)加缘,“玉大人,你說(shuō)我怎么就攤上這事觉啊〖鸷辏” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 167,709評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵杠人,是天一觀的道長(zhǎng)勋乾。 經(jīng)常有香客問(wèn)我,道長(zhǎng)嗡善,這世上最難降的妖魔是什么辑莫? 我笑而不...
    開(kāi)封第一講書人閱讀 59,520評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮罩引,結(jié)果婚禮上各吨,老公的妹妹穿的比我還像新娘。我一直安慰自己袁铐,他們只是感情好揭蜒,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,515評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著剔桨,像睡著了一般屉更。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上洒缀,一...
    開(kāi)封第一講書人閱讀 52,158評(píng)論 1 308
  • 那天瑰谜,我揣著相機(jī)與錄音,去河邊找鬼树绩。 笑死萨脑,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的葱峡。 我是一名探鬼主播砚哗,決...
    沈念sama閱讀 40,755評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼砰奕!你這毒婦竟也來(lái)了蛛芥?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,660評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤军援,失蹤者是張志新(化名)和其女友劉穎仅淑,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體胸哥,經(jīng)...
    沈念sama閱讀 46,203評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡涯竟,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,287評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片庐船。...
    茶點(diǎn)故事閱讀 40,427評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡银酬,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出筐钟,到底是詐尸還是另有隱情揩瞪,我是刑警寧澤,帶...
    沈念sama閱讀 36,122評(píng)論 5 349
  • 正文 年R本政府宣布篓冲,位于F島的核電站李破,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏壹将。R本人自食惡果不足惜嗤攻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,801評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望诽俯。 院中可真熱鬧妇菱,春花似錦、人聲如沸惊畏。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,272評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)颜启。三九已至偷俭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間缰盏,已是汗流浹背涌萤。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,393評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留口猜,地道東北人负溪。 一個(gè)月前我還...
    沈念sama閱讀 48,808評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像济炎,于是被迫代替她去往敵國(guó)和親川抡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,440評(píng)論 2 359

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