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数组元素。例如，当我键入“奥迪”时，我得到了整个“奥迪对象”，虽然我想要分别为<input>内的模式匹配的汽车制造商和/或汽车模型的结果。

我想搜索工作，当我输入“Au”时，我会在第一个列表中看到“Audi”，在第二个列表中看到“Auris”。因此，cars.carMake和cars.models[]的搜索也应该有效，并在两个列表中显示结果（汽车制造商的第一个/左侧，汽车模型的第二个/右侧）。

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

1 个答案: