html AngularJs Ng重复过滤器

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html AngularJs Ng重复过滤器相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script>
    angular.module('ngAnimate', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
      
      console.log('works');
      $scope.friends = [
        {name:'John', age:25, gender:'boy'},
        {name:'Jessie', age:30, gender:'girl'},
        {name:'Johanna', age:28, gender:'girl'},
        {name:'Joy', age:15, gender:'girl'},
        {name:'Mary', age:28, gender:'girl'},
        {name:'Peter', age:95, gender:'boy'},
        {name:'Sebastian', age:50, gender:'boy'},
        {name:'Erika', age:27, gender:'girl'},
        {name:'Patrick', age:40, gender:'boy'},
        {name:'Samantha', age:60, gender:'girl'}
      ];
      
      var ages = [25, 28];
      $scope.filterFn = function(data) {
          // Do some tests
        //if (data.age)
        if (ages.indexOf(data.age) != '-1') {
            return true;
            }
            
            return false;
      };
      
    }]);
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="ngAnimate">
  <div ng-controller="MyCtrl">
    <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:filterFn">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
    <li class="animate-repeat" ng-if="results.length == 0">
      <strong>No results found...</strong>
    </li>
  </ul>
  </div>
</body>
</html>

以上是关于html AngularJs Ng重复过滤器的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS NG-repeat：如何重复必须过滤唯一值的ng-repeat内的数据

AngularJS学习笔记01 指令服务和过滤器

使用angularJS解析ng-bind中的html [重复]

过滤的 ng-repeat 中的对象数 [重复]

嵌套 ng-repeat 的 AngularJS 记录计数

走进AngularJs ng模板中常用指令的使用方式