AngularJS学习之旅—AngularJS 过滤器(七)

<div class="cnblogs_code">

<span style="color: #0000ff"><<span style="color: #800000">head<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">charset<span style="color: #0000ff">="utf-8"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">src<span style="color: #0000ff">="js/angular.min.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">head<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">body<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">ng-app<span style="color: #0000ff">="myApp"<span style="color: #ff0000"> ng-controller<span style="color: #0000ff">="myCtrl"<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>姓名为 {{ lastName | uppercase }}<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>姓名为 {{ lastName | lowercase }}<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #008000"><span style="color: #000000">

数量: <span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="number"<span style="color: #ff0000"> ng-model<span style="color: #0000ff">="quantity"<span style="color: #0000ff">><span style="color: #000000">

价格: <span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="number"<span style="color: #ff0000"> ng-model<span style="color: #0000ff">="price"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>总价 = {{ (quantity * price) | currency }}<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">ul<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">li <span style="color: #ff0000">ng-repeat<span style="color: #0000ff">="x in names | orderBy:'country'"<span style="color: #0000ff">><span style="color: #000000">

{{ x.name + ',' + x.country }}

<span style="color: #0000ff"></<span style="color: #800000">li<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">ul<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="text"<span style="color: #ff0000"> ng-model<span style="color: #0000ff">="test"<span style="color: #0000ff">></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">ul<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">li <span style="color: #ff0000">ng-repeat<span style="color: #0000ff">="x in names | filter:test | orderBy:'country'"<span style="color: #0000ff">><span style="color: #000000">

{{ (x.name | uppercase) + ',' + x.country }}

<span style="color: #0000ff"></<span style="color: #800000">li<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">ul<span style="color: #0000ff">>

<span style="color: #008000"><span style="color: #000000">

姓名: {{ firstName | reverse }}

<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script<span style="color: #0000ff">>

<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> app <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> angular.module(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">myApp<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,[]);

app.controller(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">myCtrl<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> ($scope) {

$scope.firstName <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">John<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;

$scope.lastName <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">Doe<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;

$scope.names <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> [{

name: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Jani<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,country: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Norway<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">

},{

name: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Hege<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,country: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Sweden<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">

},{

name: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Kai<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,country: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Denmark<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">

}

];

});

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000"> 自定义过滤器

<span style="background-color: #f5f5f5; color: #000000">     app.filter(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">reverse<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000">() { <span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">可以注入依赖

<span style="background-color: #f5f5f5; color: #0000ff">return <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000">(text) {

<span style="background-color: #f5f5f5; color: #0000ff">return<span style="background-color: #f5f5f5; color: #000000"> text.split(<span style="background-color: #f5f5f5; color: #000000">""<span style="background-color: #f5f5f5; color: #000000">).reverse().join(<span style="background-color: #f5f5f5; color: #000000">""<span style="background-color: #f5f5f5; color: #000000">);

}

});

<span style="color: #0000ff"></<span style="color: #800000">script<span style="color: #0000ff">>

页面展示

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!