AngularJS變數及過濾器Filter用法分析

本文實例講述了AngularJS變數及過濾器Filter用法。分享給大家參考，如下：

1. 關於部分變數的操作

設定變數：

ng-init="hour=14" //设置hour变量在DOM中 使用data-ng-init 更好些
$scope.hour = 14; //设置hour变量在js中

   

使用變數：

(1) 如果是在***屬性裡直接寫變數名稱

如：

<p ng-show="hour > 13">I am visible.</p>

   

(2) 如果是在控制器HTML 中但是不在ng屬性裡

使用{{變數名}}

(3) 當然第三種就是上面的在js中使用

加上物件名稱$scope.

{{hour}}

   

(4) 在表單控制中ng-model中的變數

在html 中使用{{變數名稱}}

$scope.hour

   

也可以透過ng-bind 屬性進行變數綁定

<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p>

   

會自動幫你計算需要符合js語法

<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>

   

2. js中的變數循環

ng-show="true?false:true"
{{5+6}}
<div ng-app="" ng-init="points=[1,15,19,2,40]">
  <p>The third result is <span ng-bind="points[2]"></span></p>
</div>

 Description

currency    以金融格式格式化數字

filter          選擇從一個陣列項目中篩選留下子集。

lowercase   小寫

orderBy     透過表達式排序陣列

uppercase   大寫

如：

<div ng-app="" ng-init="names=[&#39;Jani&#39;,&#39;Hege&#39;,&#39;Kai&#39;]">
 <ul>
  <li ng-repeat="x in names">
   {{ x }}
  </li>
 </ul>
</div>

names | filter:test | orderBy:'country '

就是將names數組中的項目按照test表單值進行篩選

然後以names中的子元素country 進行排序

自訂過濾器：

<p>The name is {{ lastName | uppercase }}</p>