Question

我有一些像

这样的值

 historyValues =[{
        "hsID": "001",
        "hsType": 1,
        "hsName": "ABC"
    },
{
        "hsID": "002",
        "hsType": 2,
        "hsName": "BCD"
    }
{
        "hsID": "003",
        "hsType": 2,
        "hsName": "CDE"
    }]

我有如下所示的重复

<div ng-repeat="value in `historyValues` | myFilter: [1,2]">

我已经创建了一个myFilter，当上面给出了值时，它可以正常工作，但是我希望将它作为变量传递，如下所示

<div ng-repeat="value in 'historyValues' | myFilter: filteredArray">

Answer 1

您可以创建 custom filter ，接受数组作为输入，如下所示

.filter('selectedTypes', function() {
    return function(historyValues, types) {
        return historyValues.filter(function(historyval) {
            for (var i in historyval.Types) {
                if (types.indexOf(historyval.types[i]) != -1) {
                    return true;
                }
            }
            return false;
        });
    };
})

<强>样本

＆＃13;

angular.module('myApp', [])
  .filter('selectedTypes', function() {
    return function(historyValues, types) {
      return historyValues.filter(function(historyval) {
        for (var i in historyval.Types) {
          if (types.indexOf(historyval.Types[i]) != -1) {
            return true;
          }
        }
        return false;
      });
    };
  })
  .controller('TestCtrl', function($scope) {
    $scope.types = ['1', '2'];
    $scope.historyValues = [{
        Title: "This is a task title",
        Types: ["1", "3", "2", "5", "6"]
      }, {
        Title: "Another test tag title",
        Types: [ "4", "7"]
      }

    ];
  });

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS </title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="myApp">
  <ul ng-controller="TestCtrl">
    <li ng-repeat="type in historyValues  | selectedTypes:types">{{ type }}</li>
  </ul>
</body>
</html>

＆＃13;

Answer 2

您必须编写自己的自定义过滤器，将filterType作为第二个参数，并根据某些逻辑过滤historyValues。

演示代码如下：

<script>

var module = angular.module('main', [])
.controller('mainCntrl', function($scope) {
   $scope.historyValues = [{
     type: 4, 
     val: 'History1'
   }, {
    type: 2,
    val: 'History2'
   }, {
    type: 4,
    val: 'History3'
   }];
})
.filter('myFilter', function() {
  return function(input, exp) {
   var vals = [];

   angular.forEach(input, function(val) {
      if(val.type === exp) {
          vals.push(val);
      }
   });

   return vals; 
  }
})

</script>


<div ng-app="main">

<div ng-controller="mainCntrl">
  <div ng-repeat="item in historyValues | myFilter: 4">
    {{item.val}}
  </div>
</div>

</div>

Answer 3

您可以在包含多个值的对象上编写自定义过滤器。

演示： https://codepen.io/sumitridhal/pen/QvgNKR

<强> HTML

<div class="container">
  <h1>Movies</h1>

<div ng-init="movies = [
          {title:'Man on the Moon', genre:'action'},
          {title:'Meet the Robinsons', genre:'family'},
          {title:'Sphere', genre:'drama'},
          {title:'Sphere', genre:'family'},
          {title:'Sphere', genre:'action'},
          {title:'Sphere', genre:'drama'}
       ];" />
<input type="checkbox" ng-model="genrefilters.action" />Action
<br />
<input type="checkbox" ng-model="genrefilters.drama" />Drama
<br />
<input type="checkbox" ng-model="genrefilters.family" />Family
<br />{{genrefilters.action}}::{{genrefilters.drama}}::{{genrefilters.family}}
<ul>
    <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li>
</ul>

</div>

<强> JS

angular.module('myFilters', []).
filter('bygenre', function () {
    return function (movies, genres) {
    if(genres){
    let condition = [];
    angular.forEach(genres, function(value, key){
  if(value) condition.push(key);
   });
       console.log(condition);

       let filtered = movies.filter(function(movie) {
        return  condition.indexOf(movie.genre) != -1;
      });

      return filtered;
      } else 
      return [];
    };
});

angular.bootstrap(document, ['myFilters']);

Answer 4

您是否在过滤器中尝试了多个参数，而不是编写自己的过滤器：

 <div ng-repeat="value in historyValues |
   filter: { filterType: '4', filterType: '5', filterType: '6' }">

如何使用数组变量过滤ng-repeat中的值？

4 个答案: