4-进军 angular1.x 控制器和过滤器-CSDN博客

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

方法

<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>
复制代码

思考

控制器是对应模块的指挥长，也是一个 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 good
复制代码

2、date 格式化

{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
复制代码

3、number 格式化（保留小数）

{{149016.1945000 | number:2}}
复制代码

4、currency货币格式化

{{ 250 | currency }}            // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }}  // 结果：RMB ￥ 250.00
复制代码

5、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(',');
    }
});
复制代码