angularJS(二):作用域$scope、控制器、过滤器
app.controller创建控制器
一、作用域
- Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
- Scope 是一个对象,有可用的方法和属性。
- Scope 可应用在视图和控制器上
当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。
视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
根作用域
所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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 应用程序的数据。
ng-controller 指令定义了应用程序控制器。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
应用解析:
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中, $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
三、过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中
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> |
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> |
lowercase | 格式化字符串为小写。
![]() <div ng-app="myApp" ng-controller="personCtrl"> <p>姓名为 {{ lastName | lowercase }}</p> </div> |
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> |
uppercase | 格式化字符串为大写。
![]() <div ng-app="myApp" ng-controller="personCtrl"> <p>姓名为 {{ lastName | uppercase }}</p> </div> |
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位 |
自定义过滤器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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("");
}
});
<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>