【MVVM】- AngularJS 過濾器用法

過濾器作用：對model的資料進行加工，按照相應的格式進行顯示

AngularJS的過濾器和Avalon的用法差不多，一通百通。

currency 格式化數字為貨幣格式
filter 從陣列項中選擇一個子集
lowercase 格式化字串為小寫
orderBy 根據某個表示式排列陣列
uppercase 格式化字串為大寫

外觀介面

<body ng-app="myApp">

<p>字串大小過濾</p>
<div ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>

<!-- 表示式過濾和avalon的過濾方法一樣 -->
小寫姓: {{firstName | lowercase }}<br>
大寫名：{{lastName | uppercase }}
</div>

<hr>
<p>數字貨幣化處理</p>
<div ng-init="quantity=3;cost=5">
總價：{{quantity*cost | currency}}
</div>

<hr>
<p>普通陣列排序</p>
<div ng-init="nums=[0,5,6,3]">
<ol>

<!-- angular引擎先對陣列元素進行升序排列，然後再遍歷顯示，也可以對物件陣列的屬性進行排序 -->
<li ng-repeat="item in nums | orderBy:item">{{item}}</li>
</ol>
</div>

<hr>
<p>物件陣列排序</p>
<div ng-init="persons=[{'name':'zhangsan','age':'20'},
                     {'name':'lisi','age':'19'},
                     {'name':'wangwu','age':'39'}]">

<ol>
<!-- 年齡從小到大進行排序顯示 -->
<li ng-repeat="item in persons | orderBy:'age'">{{item}}</li>
</ol>
</div>

<hr>
<p>輸入過濾:</p>
<p><input type="text" ng-model="test"></p>
<ul>
  <!-- fileter:test--將輸入框的值繫結test物件，test作為persons陣列的進行數值匹配，如果匹配上就顯示響應的成員 -->
  <li ng-repeat="x in persons | filter:test | orderBy:'age'">
    {{ (x.name | uppercase) + ', ' + x.age }}
  </li>
</ul>
</div>

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;
    }
});

效果：

【MVVM】- AngularJS 過濾器用法

過濾器作用：對model的資料進行加工，按照相應的格式進行顯示 AngularJS

【MVVM】- AngularJS $scope 用法

Scope(作用域) 是應用在 HTML (檢視) 和 JavaScript (控

【MVVM】- AngularJS 依賴注入

依賴注入(Dependency Injection)：，一個或更多的依賴（或服務）

【MVVM】- AngularJS 原生API

ANgularJS 原生函式 angular.lowercase() 轉換

【MVVM】- AngularJS 服務應用

AngularJS 服務基本用法 AngularJS 中，服務是一個函式或物件，可

【MVVM】- AngularJS ng-repeat 指令

外觀介面 <body ng-app=""> <

【MVVM】- AngularJS 下拉框操作

AngularJS 下拉框基礎應用外觀介面 <div ng-app=&qu

【MVVM】- AngularJS基礎學習

Angular JS AngularJS 基礎入門案例外觀頁面 <!--

【MVVM】- Avalon 過濾器

ms-controlle作用：當頁面事先載入而頁面並未完全渲染完成時自動隱藏目標顯

【總結】angularJs的一些用法

1、ng-true-value 當我們點選checkbox 選中複選框時，ng-model 的繫結預設值是true，取消選中時為false. <input ng-model="checkboxModel" type="checkbox" >//選中時，checkboxModel

【轉】event.keyCode用法及列表

strong page ets cells 不支持和數 jump fire 靜音 event.keyCode用法及列表 HTML 用戶名：<input type="text" id="UserAccount" onKeyPress="JumpByEnter(

【javascript】slice()的用法

spl 定位 .html 指定位置 gree 只需要相等綜合應用個數 js splice()的用法在javascript中splice()方法有如下3種方式：刪除——可以刪除任意數量的項，只需要指定2個參數：要刪除的第一項的位置和要刪除項的項數。例如，s

【轉載】Java DecimalFormat 用法

最快 public oid get div 科學計數科學符號一個轉載只供個人學習參考，以下查看請前往原出處：http://blog.csdn.net/wangchangshuai0010/article/details/8577982 我們經常要將數字進行格式化，比

【轉載】ViewState的用法

log 當我 article 產生源碼協議 write 自動記憶本文導讀：在web窗體控件設置為runat = "server",這個控件會被附加一個隱藏的屬性_ViewState，_ViewState存放了所有控件在ViewState中的狀態值。ViewState

【轉載】關於generate用法的總結【Verilog】

case分支 intro 技術分享結構類型 img ora 做了 alt http://www.cnblogs.com/nanoty/archive/2012/11/13/2768933.html Abtract generate語句允許細化時間（Elabora

【Python】self的用法掃盲

現在使用內置匹配 body 參數 IT ini 是把在Python中，我們有兩個重要的概念：類與實例例如：我們在現實生活中人就是一個類，實例就是具體到某一個男人（張三、李四等）1.類：定義人這個類class People(object): pass2.實例：創建實

【JSON】Newtonsoft的用法和原理

AS 網上 style model ret 控制顯示 () .json 老忘記用法，所以這裏記一下，方便以後查找： 1.將DataSet轉成Json public string GetList() { string

【轉】#pragma的用法

導出數據 AS val bad 允許包括 record -name nds 在所有的預處理指令中，#Pragma 指令可能是最復雜的了，它的作用是設定編譯器的狀態或者是指示編譯器完成一些特定的動作。#pragma指令對每個編譯器給出了一個方法，在保持與C和C++語言完

【Zuul】Zuul過濾器參考資料

資料 path ice TP ipc zuul 過濾器 PC ati #https://blog.csdn.net/chenqipc/article/details/53322830#https://github.com/spring-cloud/spring-cloud-

【python】 del 的用法

變量引用 pre 理解 fir 數據對象 net 變量不同 first 轉自 https://blog.csdn.net/love1code/article/details/47276683 python中的del用法比較特殊，新手學習往往產生誤解，弄清del的用法，可以

【MVVM】- AngularJS 過濾器用法

相關推薦