4-进军 angular1.x 控制器和过滤器
4-控制器和过滤器
angular1.x 学习目录
基本
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
例子
<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 定义。应用程序在
内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
方法
"myApp" ng-controller="personCtrl">
名:
姓:
姓名: {{fullName()}}
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});思考
- 控制器是对应模块的指挥长，也是一个 JavaScript 对象，所以自带的 ng-controller ="myCtrl" , 这个 myCtrl 也是属于一个 JavaScript 对象
- 控制器可以在一个 ng-app 下有多个，配合 $scope 来使用就类似 JavaScript 的作用域。
过滤器
angular 的过滤器用于装换数据，其实类似于 vue1.x 的过滤器。一样的功能。
过滤器 | 概述 |
|---|---|
currency | 格式化数字为货币格式 |
filter | 从数组项中选择一个子集 |
lowercase | 格式化字符串为小写 |
orderBy | 根据某个表达式排列数组 |
uppercase | 根据某个表达式排列数组 |
- 在表达式中加过滤器
uppercase
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}p>
div>
复制代码向指令添加过滤器 过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
orderby
- orderBy 过滤器根据表达式排列数组：
- 根据 country 的首字母排序出现，当然我们可以试试 name AngularJS 实例
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
li>
ul>
div>
复制代码filter
- 输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：选择一个输入拥有其中字符的子集。
<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>
复制代码自定义过滤器
- 自定义一个翻转的字符 func
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("");
}
});
复制代码来总结下 过滤器的使用
一些常用的过滤器
1、uppercase，lowercase 大小写转换
{{ "lower cap string" | uppercase }} // 结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} // 结果：tank is good2、date 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:253、number 格式化（保留小数）
{{149016.1945000 | number:2}}4、currency货币格式化
{{ 250 | currency }} // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.005、filter查找
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
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'} }} 6、limitTo 截取
{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位7、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' }}自定义过滤器 -- 多参数
- 具体的操作就是在调用的时候用"：参数" 的格式在后面追加即可
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
app.filter('myfilter', function() { //可以注入依赖
return function(text) {
var newArguments= Array.prototype.slice.call(arguments);
return text+newArguments.join(',');
}
});
复制代码腾讯云开发者
