angularJS（二）：作用域$scope、控制器、过滤器

app.controller创建控制器

一、作用域

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

二、控制器

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

三、过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

转载于:https://www.cnblogs.com/web520/p/7229532.html