跳到主要內容

Filters

  • 過濾器(Filters)
    angularJS在資料格式顯示方面，他們使用過濾器轉換資料，首先我們需要了解過濾器可以處理範圍:

    過濾器的格式:
    {{ filter_expression | filter : expression : comparator}}

    過濾器類型 說明
    currency 貨幣格式
    filter 搜尋集合符合條件的子集合
    lowercase 轉換成小寫型態
    orderBy 排序
    uppercase 轉換成大寫型態


    (1)currency

    範例: 當宣告currency會補上$的符號

    <body ng-app="myList" >
        <div ng-controller='ListController' >
            <div ng-repeat='item in items'>
                <span>{{item.title}}</span>
                <input ng-model='item.quantity'>
                <span>unit price: {{item.price | currency}}</span>
                <span>total: {{item.price * item.quantity | currency}}</span>
            </div>
        </body>

    <script>
         var myApp = angular.module('myList',[]);
         myApp.controller('ListController', function($scope){
            $scope.items=[
                {title:"apple",quantity:10, price:350},
                {title:"banana",quantity:8,  price:450},
                {title:"star",quantity:7,  price:350}
            ];
           
        
         });
    </script>

    apple    unit price: $350.00 total: $3,500.00
    banana unit price: $450.00 total: $3,600.00
    star       unit price: $350.00 total: $2,450.00



    (2) filter
    範例:過濾符合條件的資料

    <html ng-app="myList">
        <head>
             <script src="angular.js"></script>
        </head>
       
        <body>
            <div ng-controller='ListController' >
             <input ng-model="searchText">
            <div ng-repeat='item in items | filter:searchText'>
                <span>{{item.title}}</span>
                <input ng-model='item.quantity'>
                <span>unit price: {{item.price | currency}}</span>
                <span>total: {{item.price * item.quantity | currency}}</span>
            </div>
        </body>
        </body>
        <script>
         var myApp = angular.module('myList',[]);
         myApp.controller('ListController', function($scope){
            $scope.items=[
                {title:"apple",quantity:10, price:350},
                {title:"banana",quantity:8,  price:450},
                {title:"star",quantity:7,  price:350}
            ];
         });
        </script>
    </html>

    apple unit price: $350.00 total: $3,500.00




    (3)lowercase

    範例: 當輸入apple會自動改為小寫的文字

    <div ng-app="myApp" ng-controller="lowerController">
    <input type="text" name="message" ng-model="message" />
    <p> upper case:{{message | lowercase}} </p>

    </div>

    <script>
    var myApp = angular.module("myApp",[])
    myApp.controller("lowerController", function($scope){
    });

    </script>

    input:
    upper case:apple


(4)orderBy

範例: 當利用ng-repeat印出水果明細，再利用orderBy:'price' 依照單價去排序

<body ng-app='myList' >
        <div ng-controller='ListController'>
            <div ng-repeat="item in items | orderBy:'price'" >
            <span>{{item.title}}</span>
            <input ng-model='item.quantity'>
            <span>{{item.price | currency}}</span>
            <span>total: {{item.price * item.quantity | currency}}</span>
            
        </div>
    </body>
<script>
     var myApp = angular.module('myList',[]);
     myApp.controller('ListController', function($scope){
        $scope.items=[
            {title:"apple",quantity:4, price:350},
            {title:"banana",quantity:4,  price:450},
            {title:"start",quantity:4,  price:350}
        ];
     });
   
</script>

apple    $350.00 total: $1,400.00
start     $350.00 total: $1,400.00
banana $450.00 total: $1,800.00




(5) uppercase

範例: 當輸入apple會自動改為大寫的文字

<div ng-app="myApp" ng-controller="upperController">
<input type="text" name="message" ng-model="message" />
<p> upper case:{{message | uppercase}} </p>

</div>

<script>
var myApp = angular.module("myApp",[])
myApp.controller("upperController", function($scope){
});

</script>

input:
upper case:APPLE

留言

張貼留言

這個網誌中的熱門文章

JavaBean 和POJO

前言 今天介紹JavaBean和POJO的不同，這兩個名詞在JAVA文章常常被拿來使用以及討論。在JDK1.1時候釋出才有的一個標準架構，很多時候常常被搞混，所以我們特別開闢一章來加以討論。POJO規範在企業級應用已經廣大的被使用的規範。 解釋 POJO : 全名為Plain-old-Java-object，只需要繼承Object就可以，沒有特定規定，只要建立的類別有setter/getter方法都可以稱為POJO JavaBean: JavaBean通常用來封裝多個物件成為單獨物件使用，規範比較嚴格，規則如下 規則 說明 1 需要實作序列(Serializable/Externalizable) 2 不能有參數的建構子( no-arg constructor) 3 需要有公用setter/getter 4 屬性必須要私人(private) 5 屬於特定POJO規則 比較 所有的JavaBean都為POJO，但是所有的POJO不一定為JavaBean 都可以當作重複元件 都必須序列化 特性都為可用性、易用性和持久化使用 - 應用 由圖我們可以知道POJO在應用程式中，主要用來存取資料庫資料達到持久化的目的，並提供給商業邏輯流程處理使用。這種POJO的架構提供程式人員開發時的可以很有規則將資料封裝並加以使用。 範例1. JavaBean(以員工為實例) JavaBean建立員工物件，可以發現Employee物件建構子沒有任何參數，屬性為私有化並setter/getter的命名方式。 //實作序列化 public class Employee implements java.io.Serializable{ private int id; private String name; //無參數建構子 public Employee(){} //以下實作setter/getter public void setId(int id){this.id=id;} public int getId(){return id;} public void setName(String ...
張貼留言
閱讀完整內容

Python AI-問題集

Python AI-問題集 問題集 Jupyter Notebook執行ipywidgets會出現kernel死掉的錯誤發生(The kernel appears to have died) 解決方法 (1) 根據log檔來判斷問題： 例如：log訊息出現OMP: Error #15: Initializing libiomp5.dylib, but found libiomp5.dylib already initialized. (2) 根據問題關鍵字找出問題所在： 利用google查詢所遭遇到的問題，例如我把上面的問題上google查詢可以找到這篇的解法 https://blog.csdn.net/bingjianIT/article/details/86182096 (3)實作解法： 我實作下面解法後，就可以順利執行手寫辨識的程式． //在Python宣告時加入 import os os.environ["KMP_DUPLICATE_LIB_OK"]="TRUE" 參考 https://blog.csdn.net/bingjianIT/article/details/86182096
1 則留言
閱讀完整內容

淺談機器學習原理-Nonlinear Transform

Nonlinear Transform 淺談機器學習原理-Nonlinear Transform Nonlinear Transform *通用能力 gerneralization : 就是將訓練好的模型，放到正式環境可以正常的運作，通常Linear Model的gerneralization會比較好，因為線性模型解決的問題比較單純。缺點是應用侷限比較大。 參考Chih-Chung Chang老師的範例:縣性與非線性分類範例 https://www.csie.ntu.edu.tw/~cjlin/libsvm/ 非線性問題 當如果今天假設要圈出裡面小圈圈的資料，我們就無法使用線性的模型，我們可以用非線性解像圈圈的方程式 s i g n ( − x 1 2 − x 2 2 + r ) sign(-x1^2-x2^2+r) s i g n ( − x 1 2 − x 2 2 + r ) 來解決，在演算法我們利用reduce來將不會的問題透過已知的問題來解決，所以在這個問題 我們將圈圈的方程式(非線性模型)reduce成線性模型來解決。 Reduce 方法論 我們調整圓形的方程式改為 z 0 z_0 z 0 ​ , z 1 z_1 z 1 ​ , z 2 z_2 z 2 ​ 來轉換線性方程式， { ( x n , y n ) } \{{(x_n,y_n)}\} { ( x n ​ , y n ​ ) } => { ( z n , y n ) } \{{(z_n,y_n)}\} { ( z n ​ , y n ​ ) } 在這空間資料中只要能找線，就可將不同的分類區分，圖中可以線性可以線去做分類。 透過向量方式來轉換成線性方程式 我們找到一個方式將非線性資料X透過向量轉換為Z後，希望透過線性方程式方式來學習，得到正解。 當我們Nonlinear transform轉換成線性方程式，當有新的資料進來我們無法使用invertiable(逆向工程)的方式去轉回非線...
張貼留言
閱讀完整內容