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

2021-02-02 09:48:28 浏览数 (1)

4-控制器和过滤器

angular1.x 学习目录

  • 1-angular 学习导航和基础
  • 2-表达式和指令，数据绑定
  • 3-模型和作用域 scope
  • 4-控制器和过滤器

基本

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

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

控制器是 JavaScript 对象，由标准的 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）。

方法

代码语言：javascript复制
"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

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

代码语言：javascript复制
<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}p>

div>
复制代码

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

orderby

  • orderBy 过滤器根据表达式排列数组：
  • 根据 country 的首字母排序出现，当然我们可以试试 name AngularJS 实例
代码语言：javascript复制
<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 过滤器从数组中选择一个子集：选择一个输入拥有其中字符的子集。

代码语言：javascript复制
<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
代码语言：javascript复制
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 大小写转换

代码语言：javascript复制
{{ "lower cap string" | uppercase }}   // 结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }}      // 结果：tank is good

2、date 格式化

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

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

代码语言：javascript复制
{{149016.1945000 | number:2}}

4、currency货币格式化

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

5、filter查找

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

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 截取

代码语言：javascript复制
{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位

7、orderBy 排序

代码语言：javascript复制
 // 根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' }}

自定义过滤器 -- 多参数

  • 具体的操作就是在调用的时候用"：参数" 的格式在后面追加即可
代码语言：javascript复制
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(',');
    }
});
复制代码
javascript 编程算法 angularjs bash

0 人点赞