AngularJS 过滤器

来源：互联网发布：超星电子图书馆数据库编辑：程序博客网时间：2024/06/02 04:55

案例1：<div ng-app="myApp" ng-controller="personCtrl">        <p>姓名为{{lastName | uppercase}}(大写)</p>        <p>姓名为{{lastName | lowercase}}(小写)</p>    </div>

案例2：

    <div ng-app="myApp" ng-controller="myCtrl">        <p>currency过滤器将数字格式化为货币格式</p>        <p>{{price*quantity|currency}}</p>    </div>    <script type="text/javascript">        var app = angular.module('myApp', []);        app.controller('myCtrl', function ($scope) {            $scope.quantity = '5';            $scope.price = '500';        })    </script>

案例3：

    <div ng-app="myApp" ng-controller="namesCtrl">        <p>orderBy过滤器根据表达式排列数组</p>        <ul>            <li ng-repeat="x in names | orderBy:'country'">{{x.name+''+x.country}}</li>        </ul>    </div>

案例4

<div ng-app="myApp" ng-controller="namesCtrl">        <p>过滤输入,filter过滤器从数组中选择一个子集</p>        <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>

案例5

 <div ng-app="myApp" ng-controller="myCtrl">        <p>自定义过滤器，将字符串反转</p>        姓名：{{msg| reverse}}    </div>    <script type="text/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("");            }        })    </script>

案例1引用personController.js，内容如下

var app = angular.module('myApp', []);app.controller('personCtrl', function ($scope) {    $scope.firstName = "John";    $scope.lastName = "Doe";    $scope.fullName = function () {        return $scope.firstName + "  " + $scope.lastName;    }})

案例3、4引用namesController.js，内容如下

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

阅读全文

0 0