Javascript AngularJS-使用复选框中的嵌套对象筛选数组_Javascript_Angularjs

Javascript AngularJS-使用复选框中的嵌套对象筛选数组

javascript angularjs

Javascript AngularJS-使用复选框中的嵌套对象筛选数组,javascript,angularjs,Javascript,Angularjs,我需要使用嵌套对象过滤数组，这意味着使用多个复选框过滤数组，但我有一个重复名称的问题。这是我一直在尝试使用的你知道如何解决名字重复的问题吗 html <div data-ng-app="myApp"> <div data-ng-controller="controller"> <strong>Pick a brand to see the models</strong> <div ng-init="group = (cars | gro

我需要使用嵌套对象过滤数组，这意味着使用多个复选框过滤数组，但我有一个重复名称的问题。这是我一直在尝试使用的

你知道如何解决名字重复的问题吗

html

<div data-ng-app="myApp">
<div data-ng-controller="controller">

<strong>Pick a brand to see the models</strong>
<div ng-init="group = (cars | groupBy:'make')">
    <div ng-repeat="m in group">
        <b><input type="checkbox" checked="true" ng-model="useMakes[$index]"/>{{m.name}}</b>
    </div>
</div>

<br/>
<table border="1">
    <thead>
       <tr>
           <th>#</th>
           <th>Name</th>
    <th>Maker</th>
  </tr>
</thead>
<tbody>
  <tr ng-repeat="car in cars | filter:filterMakes()">
    <td>{{$index+1}}</td>
    <td>{{car.make.name}}</td>
    <td>{{car.model}}</td>
  </tr>
</tbody>


选择一个品牌以查看车型
{{m.name}}


#
名称
制造商
{{$index+1}}
{{car.make.name}
{{car.model}}

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

myApp.controller("controller", function($scope){
    $scope.useMakes = [];

    $scope.filterMakes = function () {
        return function (p) {
        for (var i in $scope.useMakes) {
             if (p.make == $scope.group[i] && $scope.useMakes[i]) {
             return true;
             }
        }
    };
 };

 $scope.makes = [
     {id:1, name: "BMV"},
     {id:2, name: "Ford"},
     {id:3, name: "Renault"},
     {id:4, name: "Seat"},
     {id:5, name: "Opel"}
 ];

 $scope.cars = [
     {model: '316', make: {id: 1, name: "BMV"}},
     {model: '520', make: {id: 1, name: "BMV"}},
     {model: 'Fiesta', make: {id: 2, name: "Ford"}},
     {model: 'Focus', make: {id: 2, name: "Ford"}},
     {model: 'Clio', make: {id: 3, name: "Renault"}},
     {model: 'Toledo', make: {id: 4, name: "Seat"}},
     {model: 'Leon', make: {id: 4, name: "Seat"}},
     {model: 'Insignia', make: {id: 5, name: "Opel"}},
     {model: 'Astra', make: {id: 5, name: "Opel"}},
     {model: 'Corsa', make: {id: 5, name: "Opel"}}
 ];

 });

 /*I think here is the problem*/
 var uniqueItems = function (data, key) {
     var result = new Array();
     for (var i = 0; i < data.length; i++) {
     var value = data[i][key];

    if (result.indexOf(value) == -1) {
        result.push(value);
    }

 }
 return result;
 };

 myApp.filter('groupBy', function () {
     return function (collection, key) {
     if (collection === null) return;
     return uniqueItems(collection, key);
     };
});

var myApp=angular.module（'myApp'，[]）；
myApp.controller（“控制器”，函数（$scope）{
$scope.useMakes=[]；
$scope.filterMakes=函数（）{
返回函数（p）{
for（var i在$scope.useMakes中）{
if（p.make==$scope.group[i]&&$scope.useMakes[i]）{
返回true；
}
}
};
};
$scope.makes=[
{id:1，名称：“BMV”}，
{id:2，名字：“Ford”}，
{id:3，名称：“雷诺”}，
{id:4，名称：“座位”}，
{id:5，名称：“欧宝”}
];
$scope.cars=[
{model:'316'，make:{id:1，name:“BMV”}，
{model:'520'，make:{id:1，name:“BMV”}，
{型号：'Fiesta'，品牌：{id:2，名称：“Ford”}，
{model:'Focus'，make:{id:2，name:“Ford”}，
{型号：'Clio'，品牌：{id:3，名称：'Renault'}，
{型号：'Toledo'，品牌：{id:4，名称：'Seat'}，
{model:'Leon'，make:{id:4，name:“Seat”}，
{型号：'Insignia'，品牌：{id:5，名称：“欧宝”}，
{型号：'Astra'，品牌：{id:5，名称：“欧宝”}，
{型号：'Corsa'，品牌：{id:5，名称：“欧宝”}
];
});
/*我想这就是问题所在*/
var uniqueItems=函数（数据、键）{
var result=新数组（）；
对于（变量i=0；i

问题的根源在于，在

uniqueItems（）

中使用

indexOf

时，正在使用对象引用（也称内存地址）进行比较，以检查数组中是否已有内容

uniqify的effor将无法按预期工作，因为

$scope.cars[0].make

和

$scope.cars[1].make

在两个不同的位置声明，因此将创建为两个不同的对象引用

有两种可能的解决方案：

替代解决方案#1（首选）：在

$scope.cars

中创建每个

make

，以引用已在

$scope.make

中声明的对象。这是首选的解决方案，因为您将有一个中心位置来指定品牌名称（），即，如果以后要将“BMV”修复为“BMW”，您只需要更改一个位置

替代解决方案#2：如果出于某些原因希望保留

$scope.cars

，我们需要修复

$scope.filterMakes（）

和

uniqueItems（）

以仅比较

make

的唯一属性，而不是

make

对象引用。在这种情况下，我们可以比较

make.id

$scope.filterMakes = function () {
    return function (p) {
        for (var i in $scope.useMakes) {
            if (p.make.id == $scope.group[i].id && $scope.useMakes[i]) {  //add the ".id"
                return true;
            }
        }
    }
};

var uniqueItems = function (data, key) {
    var result = new Array();
    var added = []; //same as new Array();
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];
        if (added.indexOf(value.id) == -1) { //look for the id
            result.push(value);
            added.push(value.id); //list of added ids
        }
    }

    return result;
};

$scope.filterMakes=函数（）{
返回函数（p）{
for（var i在$scope.useMakes中）{
如果（p.make.id==$scope.group[i].id&&$scope.useMakes[i]）{//添加“.id”
返回true；
}
}
}
};
var uniqueItems=函数（数据、键）{
var result=新数组（）；
var added=[]；//与新数组（）相同；
对于（变量i=0；i