AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

2020-12-13 03:10

阅读：575

标签：style blog class code java c

1.切换目录,启动项目

git checkout step-9
npm start

格式化要显示的数据.

比如要将true-->yes,false-->no,这样相互替换.

soscw.com,搜素材

这里主要是使用filter过滤器来进行数据过滤,这里只是在前端进行数据过滤,原始数据是不发生变化的.

$filter:Filters are used for formatting data displayed to the user,格式化要显示的数据.

用法:

 {{ expression [| filter_name[:parameter_value] ... ] }}

自定义过滤器:

angular.module(‘phonecatFilters‘, []).filter(‘checkmark‘, function() {
  return function(input) {
    return input ? ‘yes‘ : ‘no‘;
  };
});

现在我们的过滤器已经写好了,那么将其注册到我们的项目中:

app/js/app.js:

...
angular.module(‘phonecatApp‘, [‘ngRoute‘,‘phonecatControllers‘,‘phonecatFilters‘]);
...

实际去用:

app/partials/phone-detail.html:

...

...

也可以使用angularjs的内置过滤器:

{{ "lower cap string" | uppercase }}
{{ {foo: "bar", baz: 23} | json }}
{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}

例:

Type

Talk Time

Standby time (max)

电池这一栏变成大写的了.如下所示:

soscw.com,搜素材

AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9,搜素材,soscw.com

AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

标签：style blog class code java c

原文地址：http://www.cnblogs.com/amosli/p/3724650.html

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9
文章链接：http://soscw.com/essay/27098.html

亲，登录后才可以留言！