0

我有这样的对象数组：

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>

我的代码没有像我预期的那样工作 - 它只输出整个carsArray 元素。例如，当我输入“Audi”时，我得到了整个“Audi object”，尽管我想要单独的汽车生产商和/或与里面的模式匹配的汽车模型的结果<input>。

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

4

1 回答 1

1

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

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

于 2016-08-06T21:31:36.037 回答