【AngularJS】过滤器

表达式中添加过滤器

lowercase 过滤器将字符串格式化为小写：

<div ng-app="myApp" ng-controller="personCtrl">
  <p>姓名为 {{ lastName | lowercase }}</p>
</div>

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中
orderBy 过滤器根据表达式排列数组：

<div ng-app="myApp" ng-controller="myCtrl">
  <p>所有内容:</p>
  <ul>
    <li ng-repeat="x in names | orderBy:'age'">
      {{ x.name + ', ' + x.age }}
    </li>
  </ul>
</div>

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称
filter 过滤器从数组中选择一个子集：

<div ng-app="myApp" ng-controller="myCtrl">
  <p>输入过滤:</p>
  <p><input type="text" ng-model="mytext"></p>
  <ul>
    <li ng-repeat="x in names | filter:mytext | orderBy:'age'">
      {{ (x.name | uppercase) + ', ' + x.age }}
    </li>
  </ul>
</div>

JS代码

angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.lastName = "Tom",
});


angular.module('myApp', []).controller('myCtrl', function($scope) {
    $scope.names = [
        {name:'Aler',age:10},
        {name:'Mou',age:20},
        {name:'Cherry',age:30}
    ];
});