zoukankan      html  css  js  c++  java
  • day68—angularJS学习笔记之-过滤器

    转行学开发,代码100天——2018-05-23

    今天学习angularJS的过滤器的使用。

    angular中的常用过滤器用来修改数据格式,主要有以下几类:

    1.大写,| uppercase

    2.小写,| lowercase

    3.货币,| currency(美元)

    4.排序,| orderBy:'marks' (按分数排序)

    5.过滤器,| filter:subjectName


    angularJS使用案例:
    <!DOCTYPE html>
    <html>
    <head>
        <title>angularJS 过滤器</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
            <script type="text/javascript">
            angular.module("myApp",[]).controller("studentController",function($scope){
                $scope.student ={
                    firstName:'allen',
                    lastName:'chen',
                    fees:200,
                    subjects:[
                    {name:'Physics',marks:70},
                    {name:'Chemistry',marks:85},
                    {name:'Math',marks:90},
                    {name:'Chinese',marks:89}
                    ],
                    fullName:function(){
                        var StudentObject;
                        StudentObject = $scope.student;
                        return StudentObject.firstName+" "+StudentObject.lastName;
                    }
                };
            });
        </script>
    </head>
    <body ng-app="myApp">
        <h2>Angular JS Filters</h2>
        <div  ng-controller="studentController">
            <table border="0">
                <tr><td>First Name:</td><td><input type="text" name="" ng-model="student.firstName"></td></tr>
                <tr><td>Last Name:</td><td><input type="text" name="" ng-model="student.lastName"></td></tr>
                <tr><td>fees:</td><td><input type="text" name="" ng-model="student.fees"></td></tr>
                <tr><td>subject:</td><td><input type="text" name="" ng-model="subjectName"></td></tr>
            </table>
            <br/>
            <table border="0">
                <tr><td>Name in Upper Case:</td><td>{{student.fullName()|uppercase}}</td></tr>
                <tr><td>Name in Lower Case</td><td>{{student.fullName()|lowercase}}</td></tr>
                <tr><td>fees:</td><td>{{student.fees|currency}}</td></tr>
                <tr><td>subject:</td><td>
                    <ul>
                        <li ng-repeat="subject in student.subjects|filter:subjectName|orderBy:'marks'">{{subject.name+',marks:'+subject.marks}}</li>
                    </ul>
                </td></tr>
            </table>
    
        </div>
    </body>
    </html>

     
  • 相关阅读:
    day⑥:logging模块
    day⑥:shelve模块
    day⑥:xml模块
    day⑤:冒泡排序
    day⑤:模块
    day⑤:re深入
    day④:递归
    day④:迭代器
    day④:装饰器
    day③:函数式编程
  • 原文地址:https://www.cnblogs.com/allencxw/p/9097233.html
Copyright © 2011-2022 走看看