欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

angular 教程 入门 文档 手册 有大用

https://www.php.cn/manual/view/19512.html  手册

https://www.angularjs.net.cn/api/ 文档 有大用

https://www.runoob.com/angularjs/angularjs-tutorial.html

https://www.angular.cn/

https://www.angularjs.net.cn/

https://code.angularjs.org/  各版本下载

https://github.com/angular/angular.js/releases  各版本下载


https://www.w3cschool.cn/angular2/angular2_hello_world.html     Angular 2

https://www.angular.cn/start    https://www.angular.cn/   好像也是   Angular 2




AngularJS 教程


Angular

AngularJS 通过新的属性和表达式扩展了 HTML。

AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。

AngularJS 学习起来非常简单。

现在开始学习 AngularJS!


每个章节都有相应的实例

在每个章节中,您可以在线编辑实例,然后点击按钮查看结果。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

尝试一下 »


阅读本教程前,您需要了解的知识:

在开始学习 AngularJS 之前,您需要具备以下基础知识:

  • HTML

  • CSS

  • JavaScript


AngularJS 历史

AngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。

AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。

这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护这个库。


AngularJS 实例

本教程包含了大量的 AngularJS 实例!

AngularJS 实例


AngularJS 参考手册

参考手册包含了本教程中使用到的所有指令和过滤器。

AngularJS 参考手册



1 篇笔记 写笔记

  1.    小浪漫

      139***5300@qq.com

    0

    1、ng-app=" "  定义angularJS的使用范围;

    2、ng-init="变量=值;变量='值'"  初始化变量的值,有多个变量时,中间用分号隔开;

    3、ng-model="变量"  定义变量名;

    4、ng-bind="变量"  绑定变量名,获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值,比如:{{变量}}。

    小浪漫

       小浪漫

      139***5300@qq.com

    2年前 (2017-06-01)

来自 https://www.runoob.com/angularjs/angularjs-tutorial.html



AngularJS 简介


AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。


AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:


Note我们建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

各个 angular.js 版本下载: https://github.com/angular/angular.js/releases


AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

AngularJS 实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="">     <p>名字 : <input type="text" ng-model="name"></p>     <h1>Hello {{name}}</h1> </div> </body> </html>

尝试一下 »

实例讲解:

当网页加载完毕,AngularJS 自动开启。

ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。


Note如果您移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。

什么是 AngularJS?

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。

  • AngularJS 可以克隆和重复 HTML 元素。

  • AngularJS 可以隐藏和显示 HTML 元素。

  • AngularJS 可以在 HTML 元素"背后"添加代码。

  • AngularJS 支持输入验证。


AngularJS 指令

正如您所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。

AngularJS 实例

<div ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </div>

尝试一下 »


NoteHTML5 允许扩展的(自制的)属性,以 data- 开头。
AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

带有有效的 HTML5:

AngularJS 实例

<div data-ng-app="" data-ng-init="firstName='John'"> <p>姓名为 <span data-ng-bind="firstName"></span></p> </div>

尝试一下 »


AngularJS 表达式

AngularJS 表达式写在双大括号内:{{ expression }}

AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="">     <p>我的第一个表达式: {{ 5 + 5 }}</p> </div> </body> </html>

尝试一下 »

AngularJS 应用

AngularJS 模块(Module) 定义了 AngularJS 应用。

AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

ng-app指令指明了应用, ng-controller 指明了控制器。

AngularJS 实例

<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 模块定义应用:

AngularJS 模块

var app = angular.module('myApp', []);

AngularJS 控制器控制应用:

AngularJS 控制器

app.controller('myCtrl', function($scope) {    $scope.firstName= "John";    $scope.lastName= "Doe"; });

在接下来的教程中你将学习到更多的应用和模块的知识。


来自  https://www.runoob.com/angularjs/angularjs-intro.html


AngularJS 表达式


AngularJS 使用 表达式 把数据绑定到 HTML。


AngularJS 表达式

AngularJS 表达式写在双大括号内:{{ expression }}

AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="">     <p>我的第一个表达式: {{ 5 + 5 }}</p> </div> </body> </html>

尝试一下 »

AngularJS 数字

AngularJS 数字就像 JavaScript 数字:

AngularJS 实例

<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价: {{ quantity * cost }}</p> </div>

尝试一下 »

使用 ng-bind 的相同实例:

AngularJS 实例

<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价: <span ng-bind="quantity * cost"></span></p> </div>

尝试一下 »


Note使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串:

AngularJS 实例

<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名: {{ firstName + " " + lastName }}</p> </div>

尝试一下 »

使用 ng-bind 的相同实例:

AngularJS 实例

<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p> </div>

尝试一下 »


AngularJS 对象

AngularJS 对象就像 JavaScript 对象:

AngularJS 实例

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 {{ person.lastName }}</p> </div>

尝试一下 »

使用 ng-bind 的相同实例:

AngularJS 实例

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 <span ng-bind="person.lastName"></span></p> </div>

尝试一下 »


AngularJS 数组

AngularJS 数组就像 JavaScript 数组:

AngularJS 实例

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{ points[2] }}</p> </div>

尝试一下 »

使用 ng-bind 的相同实例:

AngularJS 实例

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 <span ng-bind="points[2]"></span></p> </div>

尝试一下 »

AngularJS 表达式 与 JavaScript 表达式

类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。

与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。

与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

来自 https://www.runoob.com/angularjs/angularjs-expressions.html


AngularJS 指令


AngularJS 通过被称为 指令 的新属性来扩展 HTML。

AngularJS 通过内置的指令来为应用添加功能。

AngularJS 允许你自定义指令。


AngularJS 指令

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

完整的指令内容可以参阅 AngularJS 参考手册

AngularJS 实例

<div ng-app="" ng-init="firstName='John'">     <p>在输入框中尝试输入:</p>     <p>姓名:<input type="text" ng-model="firstName"></p>     <p>你输入的为: {{ firstName }}</p> </div>

尝试一下 »

ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

数据绑定

上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

在下一个实例中,两个文本域是通过两个 ng-model 指令同步的:

AngularJS 实例

<div ng-app="" ng-init="quantity=1;price=5"> <h2>价格计算器</h2> 数量: <input type="number"    ng-model="quantity"> 价格: <input type="number" ng-model="price"> <p><b>总价:</b> {{ quantity * price }}</p> </div>

尝试一下 »


Note使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素:

AngularJS 实例

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">  <p>使用 ng-repeat 来循环数组</p>  <ul>    <li ng-repeat="x in names">      {{ x }}    </li>  </ul> </div>

尝试一下 »

ng-repeat 指令用在一个对象数组上:

AngularJS 实例

<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>循环对象:</p> <ul>  <li ng-repeat="x    in names">    {{ x.name + ', ' + x.country }}  </li> </ul> </div>

尝试一下 »


NoteAngularJS 完美支持数据库的 CRUD(增加Create、读取Read、更新Update、删除Delete)应用程序。
把实例中的对象想象成数据库中的记录。

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的 根元素

ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。

稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块。


ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了 初始值

通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。

稍后您将学习更多有关控制器和模块的知识。


ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以:

  • 为应用程序数据提供类型验证(number、email、required)。

  • 为应用程序数据提供状态(invalid、dirty、touched、error)。

  • 为 HTML 元素提供 CSS 类。

  • 绑定 HTML 元素到 HTML 表单。


ng-repeat 指令

ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素



创建自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令,HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

AngularJS 实例

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

尝试一下 »

你可以通过以下方式来调用指令:

  • 元素名

  • 属性

  • 类名

  • 注释

以下实例方式也能输出同样结果:

元素名

<runoob-directive></runoob-directive>

尝试一下 »

属性

<div runoob-directive></div>

尝试一下 »

类名

<div class="runoob-directive"></div>

尝试一下 »

注释

<!-- directive: runoob-directive -->

尝试一下 »

限制使用

你可以限制你的指令只能通过特定的方式来调用。

实例

通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);
app.directive("runoobDirective"function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

尝试一下 »

restrict 值可以是以下几种:

  • E 作为元素名使用

  • A 作为属性使用

  • C 作为类名使用

  • M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。


来自 https://www.runoob.com/angularjs/angularjs-directives.html



AngularJS ng-model 指令


ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。


ng-model 指令

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

尝试一下 »

双向绑定

双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改:

AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>

尝试一下 »

验证用户输入

AngularJS 实例

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

尝试一下 »

以上实例中,提示信息会在 ng-show 属性返回 true 的情况下显示。


应用状态

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

AngularJS 实例

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required></p>
    <h1>状态</h1>
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}
</form>

尝试一下 »

CSS 类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:

AngularJS 实例

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myAddress" ng-model="text" required>
</form>

尝试一下 »

ng-model 指令根据表单域的状态添加/移除以下类:

  • ng-empty

  • ng-not-empty

  • ng-touched

  • ng-untouched

  • ng-valid

  • ng-invalid

  • ng-dirty

  • ng-pending

  • ng-pristine


来自  https://www.runoob.com/angularjs/angularjs-model.html



AngularJS Scope(作用域)


Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象,有可用的方法和属性。

Scope 可应用在视图和控制器上。


如何使用 Scope

当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:

AngularJS 实例

控制器中的属性对应了视图上的属性:

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl'function($scope) {
    $scope.carname = "Volvo";
});
</script>

尝试一下 »

当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。

视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}


Scope 概述

AngularJS 应用组成如下:

  • View(视图), 即 HTML。

  • Model(模型), 当前视图中可用的数据。

  • Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

AngularJS 实例

如果你修改了视图,模型和控制器也会相应更新:

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

尝试一下 »

Scope 作用范围

了解你当前使用的 scope 是非常重要的。

在以上两个实例中,只有一个作用域 scope,所以处理起来比较简单,但在大型项目中, HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。

AngularJS 实例

当我们使用 ng-repeat 指令时,每个重复项都访问了当前的重复对象:

<div ng-app="myApp" ng-controller="myCtrl">

<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl'function($scope) {
    $scope.names = ["Emil""Tobias""Linus"];
});
</script>

尝试一下 »

每个 <li> 元素可以访问当前的重复对象,这里对应的是一个字符串, 并使用变量 x 表示。


根作用域

所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

AngularJS 实例

创建控制器时,将 $rootScope 作为参数传递,可在应用中使用:

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

尝试一下 »


来自  https://www.runoob.com/angularjs/angularjs-scopes.html


AngularJS 控制器


 AngularJS 控制器 控制 AngularJS 应用程序的数据。

 AngularJS 控制器是常规的 JavaScript 对象


AngularJS 控制器

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

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

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

AngularJS 实例

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


控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以有方法(变量和函数):

AngularJS 实例

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

尝试一下 »

外部文件中的控制器

在大型的应用程序中,通常是把控制器存储在外部文件中。

只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可:

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

尝试一下 »

其他实例

以下实例创建一个新的控制器文件:

angular.module('myApp', []).controller('namesCtrl', function($scope) {    $scope.names = [        {name:'Jani',country:'Norway'},        {name:'Hege',country:'Sweden'},        {name:'Kai',country:'Denmark'}    ]; });

保存文件为  namesController.js:

然后,在应用中使用控制器文件:

AngularJS 实例

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

尝试一下 »


来自  https://www.runoob.com/angularjs/angularjs-controllers.html


AngularJS 过滤器


过滤器可以使用一个管道字符(|)添加到表达式和指令中。


AngularJS 过滤器

AngularJS 过滤器可用于转换数据:

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

表达式中添加过滤器

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

(下面的两个实例,我们将使用前面章节中提到的 person 控制器)

uppercase 过滤器将字符串格式化为大写:

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">

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

</div>

尝试一下 »

lowercase 过滤器将字符串格式化为小写:

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | lowercase }}</p>

</div>

尝试一下 »

currency 过滤器

currency 过滤器将数字格式化为货币格式:

AngularJS 实例

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

尝试一下 »

向指令添加过滤器

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

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

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 过滤器从数组中选择一个子集:

AngularJS 实例

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

尝试一下 »

自定义过滤器

以下实例自定义一个过滤器 reverse,将字符串反转:

AngularJS 实例

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("");    } });

尝试一下 »


来自  https://www.runoob.com/angularjs/angularjs-filters.html