Question

此问题来自here

我想进行过滤，以便我可以显示colors.name的值，只要它们在cars.color中显示为值。

$scope.colors = [{"name":"blue","count":2},
                 {"name":"red","count":12},
                 {"name":"pink","count":5},
                 {"name":"yellow","count":2}];

$scope.cars=[ {"brand":"Ford","color":"blue", "seat":"pink"}
       ,{"brand":"Ferrari","color":"red", "seat":"pink"}
       ,{"brand":"Rolls","color":"blue","seat":"pink"}];

然后在视图中：

<ul>
    <li ng-repeat="n in colors | filter: filteredColors"> {{n}}
    </li>
</ul>

结果应该是

的蓝色

的红色

我需要答案不要有ES6，我需要过滤器在控制器中。见plunkr here。提前谢谢！

Answer 1

您可以使用自定义过滤器：

 app.filter('colorFilter', function(){
    return function(val){
        var colorsvar = [{"name":"blue","count":2},
             {"name":"red","count":12},
             {"name":"pink","count":5},
             {"name":"yellow","count":2}];
        var filtered = []
        angular.forEach(val, function(key, value){
                angular.forEach(colorsvar, function(key2, value2){
                     if(key.color === key2.name)
                         filtered.push(key)
                })
        })
        return filtered;
    }
})

然后在你的HTML上：

<li ng-repeat="n in cars | colorFilter"> {{n.color}}

希望这有帮助。

Answer 2

控制器：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.colors = [{"name":"blue","count":2},
                 {"name":"red","count":12},
                 {"name":"pink","count":5},
                 {"name":"yellow","count":2}];

  $scope.cars=[ {"brand":"Ford","color":"blue", "seat":"pink"}
       ,{"brand":"Ferrari","color":"red", "seat":"pink"}
       ,{"brand":"Rolls","color":"blue","seat":"pink"}];

  $scope.filteredColors = function(color) {
    var carsvar = $scope.cars;
    for(var x = 0; x < carsvar.length; x++) {
      if (color.name === carsvar[x].color) {
        return true;
      }
    }
    return false; 
  };

});

视图：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.6.x" src="https://code.angularjs.org/1.6.6/angular.js" data-semver="1.6.6"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ul>
        <li ng-repeat="color in colors | filter: filteredColors"> {{color.name}}
        </li>
    </ul>
  </body>

</html>

Answer 3

根据您的第一个问题，在不使用ES6的情况下有一些答案。 AngularJS - How to check that a specific key has a specific value in an array

所以我认为你不需要使用任何内置函数来完成你的逻辑。

尝试使用手动loop而不是map或include bla bla bla ..就像JavaScript中的普通angularjs方式一样。把这个答案作为一把钥匙。将此答案作为密钥，并使用angular.filter()。

＆＃13;

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.colors  = [{"name":"blue","count":2},
             {"name":"red","count":12},
             {"name":"pink","count":5},
             {"name":"yellow","count":2}];



$scope.cars=[ {"brand":"Ford","color":"blue"}
           ,{"brand":"Ferrari","color":"red"}
           ,{"brand":"Rolls","color":"blue"}];

$scope.filteredColors = function () {
var colorsvar = $scope.colors;
var carsvar = $scope.cars;
$scope.newValue = [];
for (var i = 0; i < colorsvar.length; i++) {
    for (var j = 0; j < carsvar.length; j++) {
        if (colorsvar[i].name == carsvar[j].color) {
            if ($scope.newValue.indexOf(colorsvar[i].name) ==-1) {
                $scope.newValue.push(colorsvar[i].name);
            }
        }
    }
}
   return $scope.newValue;
  };
 })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="n in filteredColors()"> {{n}}
    </li>
</ul>
</div>

＆＃13;

Angular JS - 当一个数组中特定键中的值也显示为另一个数组中特定键的值时进行过滤

3 个答案: