4-进军 angular1.x 控制器和过滤器-白红宇

4-控制器和过滤器

angular1.x 学习目录

基本

AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

例子


    
     名: 
     
     
姓: 
     
     
     
姓名: {
   {firstName + " " + lastName}}
    
复制代码

分析：

AngularJS 应用程序由 ng-app 定义。应用程序在

内运行。

ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。

控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

方法


     
      名: 
      
      
姓: 
      
      
      
姓名: {
    {fullName()}}
     
复制代码

思考

控制器是对应模块的指挥长，也是一个 JavaScript 对象，所以自带的 ng-controller ="myCtrl" , 这个 myCtrl 也是属于一个 JavaScript 对象

控制器可以在一个 ng-app 下有多个，配合 $scope 来使用就类似 JavaScript 的作用域。

过滤器

angular 的过滤器用于装换数据，其实类似于 vue1.x 的过滤器。一样的功能。

过滤器	概述
currency	格式化数字为货币格式
filter	从数组项中选择一个子集
lowercase	格式化字符串为小写
orderBy	根据某个表达式排列数组
uppercase	根据某个表达式排列数组

在表达式中加过滤器

uppercase

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。


     
      姓名为 {
    { lastName | uppercase }}
     
复制代码

向指令添加过滤器过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderby

orderBy 过滤器根据表达式排列数组：

根据 country 的首字母排序出现，当然我们可以试试 name AngularJS 实例


     
        
           {
    { x.name + ', ' + x.country }}  
      
     
复制代码

filter

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：选择一个输入拥有其中字符的子集。


     
      
        
           {
    { (x.name | uppercase) + ', ' + x.country }}  
      
     
复制代码

自定义过滤器

自定义一个翻转的字符 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(',');    }});复制代码