angularJS（二）：做用域$scope、控制器、過濾器

app.controller建立控制器

1、做用域

---

• Scope(做用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。
• Scope 是一個對象，有可用的方法和屬性。
• Scope 可應用在視圖和控制器上

 

當在控制器中添加 $scope 對象時，視圖 (HTML) 能夠獲取了這些屬性。

視圖中，你不須要添加 $scope 前綴, 只須要添加屬性名便可，如： {{carname}}。

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>點我</button>    
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";
    $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
});
</script>

View Code

根做用域

全部的應用都有一個 $rootScope，它能夠做用在 ng-app 指令包含的全部 HTML 元素中。

$rootScope 可做用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，能夠在各個 controller 中使用。

<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>

View Code

2、控制器

---

 

控制 AngularJS 應用程序的數據。

ng-controller 指令定義了應用程序控制器。

<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>

View Code

應用解析：

AngularJS 應用程序由 ng-app 定義。應用程序在 <div> 內運行。

ng-controller="myCtrl" 屬性是一個 AngularJS 指令。用於定義一個控制器。

myCtrl 函數是一個 JavaScript 函數。

AngularJS 使用$scope 對象來調用控制器。

在 AngularJS 中， $scope 是一個應用對象(屬於應用變量和函數)。

控制器的 $scope （至關於做用域、控制範圍）用來保存AngularJS Model(模型)的對象。

控制器在做用域中建立了兩個屬性 (firstName 和 lastName)。

ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）。

<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>

View Code

3、過濾器

---

 

過濾器能夠使用一個管道字符（|）添加到表達式和指令中

currency	格式化數字爲貨幣格式。 {{250| currency }}// 結果：$250.00{{250| currency:"RMB ￥ "}}// 結果：RMB ￥ 250.00 <div ng-app="myApp" ng-controller="costCtrl"> <input type="number" ng-model="quantity"> <input type="number" ng-model="price"> <p>總價 = {{ (quantity * price) | currency }}</p> </div> View Code
filter	從數組項中選擇一個子集。 // 查找name爲iphone的行{{[{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]| filter:{'name':'iphone'}}} <div ng-app="myApp" ng-controller="namesCtrl"> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> </div> View Code
lowercase	格式化字符串爲小寫。 <div ng-app="myApp" ng-controller="personCtrl"> <p>姓名爲 {{ lastName | lowercase }}</p> </div> View Code
orderBy	根據某個表達式排列數組。 // 根id降序排{{[{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]| orderBy:'id':true}}// 根據id升序排{{[{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]| orderBy:'id'}} <div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> </div> View Code
uppercase	格式化字符串爲大寫。 <div ng-app="myApp" ng-controller="personCtrl"> <p>姓名爲 {{ lastName | uppercase }}</p> </div> View Code
date	日期格式化， {{1490161945000| date:"yyyy-MM-dd HH:mm:ss"}}// 2017-03-22 13:52:25
number	格式化（保留小數）{{149016.1945000| number:2}}
limitTo	截取{{"1234567890"| limitTo :6}}// 從前面開始截取6位 {{"1234567890"| limitTo:-4}}// 從後面開始截取4位

自定義過濾器

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //能夠注入依賴
    return function(text) {
        return text.split("").reverse().join("");
    }
});

View Code

 

<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>