zoukankan      html  css  js  c++  java
  • AngularJS 过滤器

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

    2.  AngularJS 过滤器:

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

    3.  表达式中添加过滤器:添加的过滤器是uppercase,使字符串格式化为大写。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/angular.min.js"></script>
        </head>
        <body>
            <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义,在这个div内运行-->
                姓名:{{xingMing() | uppercase}}
            </div>
        
            <script type="text/javascript" src="js/xingMing.js"></script>
        </body>
    </html>
    var app = angular.module("myApp", []);
    app.controller('myCtrl', function($scope) { /*myCtrl是一个JavaScript函数*/
        $scope.xing = 'wang';
        $scope.ming = 'ganlin';
        $scope.xingMing = function() {
            return $scope.xing + $scope.ming;
        };
    });

    4.  向指令添加过滤器和过滤输入:orderBy过滤器根据表达式排序数组,filter过滤器从数组中选择一个子集

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/angular.min.js"></script>
        </head>
        <body>
            <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义,在这个div内运行-->
                <input type="text" ng-model="test" />
                <ul>
                    <li ng-repeat="x in students | filter:test | orderBy:'class'">
                        {{x.name + ", " +x.class}}
                    </li>
                </ul>
            </div>
        
            <script type="text/javascript" src="js/xingMing.js"></script>
        </body>
    </html>
    var app = angular.module("myApp", []);
    app.controller('myCtrl', function($scope) { /*myCtrl是一个JavaScript函数*/
        $scope.students = [
            {name:'hong',class:'class2'},
            {name:'fang',class:'class3'},
            {name:'ming',class:'class1'}
        ];
    });

  • 相关阅读:
    Elasticsearch、Logstash和Kibana Windows环境搭建(一)
    20200820--1维数组 年龄与疾病(奥赛一本通P78 5)
    20200820--1维数组 数组逆序重放(奥赛一本通P77 4)
    20200820--一维数组:与指定数字相同的数的个数(奥赛一本通P75 1)
    20200819--金币 奥赛一本通P73 10 已讲
    20200818-数1的个数(奥赛一本通 P69 5)
    bits/stdc++.h
    数1的个数(奥赛一本通 P69 5)
    函数和方法的讲解
    20200817-与7无关的数(奥赛一本通 P68 4)
  • 原文地址:https://www.cnblogs.com/wgl1995/p/6264106.html
Copyright © 2011-2022 走看看