AngularJS入门（三）

AngularJS过滤器

1.  AngularJS过滤器可以使用类似linux的字符 | 添加到表达式和指令中。可以转换数据，主要有下面的一些过滤器：

currency	格式化数字为货币格式
filter	数据项选择子集
lowercase	字符串小写
orderBy	根据某表达式排列数组
uppercase	字符串大写

2.  向表达式添加过滤器（表达式 | 过滤器）

<div ng-app="" ng-controller="personController">
  <p>姓名为 {{ person.lastName | uppercase }}</p>
</div>

<div ng-app="" ng-controller="costController">
数量：<input type="number" ng-model="quantity">
价格：<input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>

以上代码用控制器初始化数据，请参见上一篇《AngularJS控制器》。
3.  向指令添加过滤器（指令 | 过滤器）

<div ng-app="" ng-controller="namesController">
<p>循环对象：</p>
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
<div>

上面的代码同样用到了控制器，不妨贴出来权当复习，先给出独立的控制器js对象代码：

function namesController($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
}

然后引入该控制器即可完成数据初始化：

<div ng-app="" ng-controller="namesController">
 <ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
 </ul>
</div>
<script src="namesController.js"></script>

4.  过滤输入（指令或表达式 | filter:模型对象名称）

<div ng-app="" ng-controller="namesController">
 <p>输入过滤：</p>
 <p><input type="text" ng-model="name"></p>

 <ul>
  <li ng-repeat="x in names | filter:name | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
 </ul>
</div>

形式：过滤器:模型名称；过滤输入后续还可以添加其他过滤器，如orderBy等。

声明：此入门教程内容主要来自于http://www.w3cschool.cc/angularjs