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>

     
  • 相关阅读:
    在VS2010下,用QT,创建一个Opencv应用程序
    SNR(信噪比)与 特定分布噪声的关系初探
    Qt学习笔记_FindDialog
    关于reduced rank regression的一些看法
    实时摄像头人眼跟踪: RealTime Tracking Of Human Eyes Using a Webcam
    L1_APG_Tracker实现代码剖析
    CVPR2013 感兴趣论文汇总
    使用PowerDesigner 15对现有数据库进行反向工程(图解教程)(转)
    大数据量高并发的数据库优化
    rtmp和rtsp的区别
  • 原文地址:https://www.cnblogs.com/allencxw/p/9097233.html
Copyright © 2011-2022 走看看