如何使用數組變量過濾ng-repeat中的值？

Question

我有一些價值觀

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

我有ng-repeat如下

<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;
        });
    };
})

DEMO

 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"] } ]; });

 <!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>

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 個解決方案

解決方案1
2 已采納 2017-05-02 05:52:13

解決方案2
0 2017-05-02 06:07:45

解決方案3
0 2017-05-02 06:54:23

解決方案4
0 2017-05-02 07:05:00

如何使用數組變量過濾ng-repeat中的值？

問題描述

4 個解決方案

解決方案1 2 已采納 2017-05-02 05:52:13

解決方案2 0 2017-05-02 06:07:45

解決方案3 0 2017-05-02 06:54:23

解決方案4 0 2017-05-02 07:05:00

解決方案1
2 已采納 2017-05-02 05:52:13

解決方案2
0 2017-05-02 06:07:45

解決方案3
0 2017-05-02 06:54:23

解決方案4
0 2017-05-02 07:05:00