AngularJS 过滤对象数组，包括嵌套数组，值来自 <input>

Question

我有这样的对象数组：

var cars = [  
   {  
      "carMake":"Audi",
      "models":[  
         "A4",
         "A6",
         "R8"
      ]
   },
   {  
      "carMake":"BMW",
      "models":[  
         "3er",
         "X3",
         "i8",
         "7er"
      ]
   },
   {  
      "carMake":"Toyota",
      "models":[  
         "Corolla",
         "Auris",
         "Yaris",
         "Gt86",
         "Rav4"
      ]
   }
];

我试过下面的 AngularJS 搜索代码：

$scope.searching = '';
$scope.producers = [];
$scope.models = [];

$scope.searchCar = function() {
  $scope.producers = $filter('filter')(cars, function(value) {
    return value.carMake === $scope.searching;
  });
  $scope.models = $filter('filter')(cars, function(value) {
    return angular.forEach(value.models, function(model) {
      return model === $scope.searching;
    });
  });
};

里面HTML我有：

<label>What do you want to find?
  <input type="text" ng-model="searching" ng-change="searchCar()" placeholder="Search...">
</label>
<ul>
  <li ng-repeat="producer in producers">{{producer}}</li>
</ul>
<ul>
  <li ng-repeat="model in models">{{model}}</li>
</ul>

我的代码没有按预期运行 - 它只输出整个 cars 数组元素。例如，当我输入 "Audi" 时，我得到了整个 "Audi object"，虽然我想要单独的汽车生产商 and/or 汽车模型的结果，这些汽车模型与 <input>.

中的模式相匹配

我希望搜索像这样工作，当我输入 "Au" 时，我会在第一个列表中看到 "Audi"，在第二个列表中看到 "Auris"。因此，对于 cars.carMake 和 cars.models[] 的搜索应该同样有效，并在两个列表中显示结果（first/left 用于汽车制造商，second/right 用于汽车型号）。

Answer 1

我建议您将项目存储在单独的数组中，然后在视图中使用 filter：

(function() {
  angular
    .module("app", [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.sensitiveCompare = sensitiveCompare;
    var cars = [  
       {  
          "carMake":"Audi",
          "models":[  
             "A4",
             "A6",
             "R8"
          ]
       },
       {  
          "carMake":"BMW",
          "models":[  
             "3er",
             "X3",
             "i8",
             "7er"
          ]
       },
       {  
          "carMake":"Toyota",
          "models":[  
             "Corolla",
             "Auris",
             "Yaris",
             "Gt86",
             "Rav4"
          ]
       }
    ];

    $scope.producers = cars.map(function(car) {
      return car.carMake;
    });

    $scope.models = [];
    
    cars.forEach(function(car) {
      $scope.models = $scope.models.concat(car.models);
    });


    function sensitiveCompare(input, search) {
      return ('' + input).indexOf('' + search) > -1;
    }
  }
})();

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

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <label>What do you want to find?
    <input type="text" ng-model="searching" ng-change="searchCar()" placeholder="Search...">
  </label>
  <ul>
    <li ng-repeat="producer in producers | filter: searching: sensitiveCompare" ng-bind="producer"></li>
  </ul>
  <ul>
    <li ng-repeat="model in models | filter: searching: sensitiveCompare" ng-bind="model"></li>
  </ul>
</body>

</html>

编辑：

如果你真的想为此创建你的自定义function，请检查：

(function() {
  angular
    .module("app", [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope', '$filter'];

  function MainCtrl($scope, $filter) {
    $scope.searchCar = searchCar;
    var cars = [  
       {  
          "carMake":"Audi",
          "models":[  
             "A4",
             "A6",
             "R8"
          ]
       },
       {  
          "carMake":"BMW",
          "models":[  
             "3er",
             "X3",
             "i8",
             "7er"
          ]
       },
       {  
          "carMake":"Toyota",
          "models":[  
             "Corolla",
             "Auris",
             "Yaris",
             "Gt86",
             "Rav4"
          ]
       }
    ];
    
    $scope.producers = [];
    $scope.models = [];
    
    function searchCar() {
      $scope.producers = $filter('filter')(cars, function(car) {
        return car.carMake.indexOf($scope.searching) !== -1;
      });
      
      $filter('filter')(cars, function(car) {
        $scope.models = car.models.filter(function(model) {
          return model.indexOf($scope.searching) !== -1;
        })
      });
    }
  }
})();

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

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  <label>What do you want to find?
    <input type="text" ng-model="searching" ng-change="searchCar()" placeholder="Search...">
  </label>
  <ul>
    <li ng-repeat="producer in producers" ng-bind="producer.carMake"></li>
  </ul>
  <ul>
    <li ng-repeat="model in models" ng-bind="model"></li>
  </ul>
</body>

</html>

AngularJS 过滤对象数组，包括嵌套数组，值来自 <input>

AngularJS filter array of objects, including nested array, with value from <input>

search

input

filter

arrayobject

angularjs