如何使用 ng-repeat 过滤带有 arraylist 的数组答案

【问题标题】：How to filter array with arraylist using ng-repeat如何使用 ng-repeat 过滤带有 arraylist 的数组
【发布时间】：2018-10-30 10:10:25
【问题描述】：

我正在尝试使用简单的数组列表过滤数组，但我似乎无法弄清楚如何，我尝试使用自定义过滤器但无法使其工作。编辑：我添加了更多代码。文本框搜索工作正常，但是当我在 ng-repeat 上添加 myFilterby 时，它不再过滤。我只是想过滤掉一个数组列表。

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search .." ng-model="searchText">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">
        <span class="glyphicon glyphicon-search"></span>
      </button>
    </span>
</div>
</div>

<td ng-repeat="a in product| filter:searchText | filter:myFilterBy">
    <img class="avatar" src="img/{{a.image}}" alt="">
    <div class="middleT">
        <p>{{a.brand}} {{a.model}} </p>
        <p>${{a.price}} </p>
    </div>

角度：

var HandleModule = angular.module("HandleModule",['rzModule','ui.bootstrap','angular.filter']);
HandleModule.controller('HandleCtrl',function($scope,$http){
    // get data from the server in JSON format
   $scope.chk0 = ['apple', 'orange', 'banana'];
    $http.get('./loader.php').then(successCallback, errorCallback);
    function successCallback(response){
    //success code
    $scope.product = response.data;
    }
    function errorCallback(error){
    //error code
    $scope.product="error";
    }


$scope.myFilterBy = function(e) {
    return $scope.chk0.indexOf(e) !== -1;
}

PHP：

 <?php
$con = mysqli_connect("localhost","root","","product");
$query = "SELECT id, model, brand, price, description, image,  FROM fruits ORDER BY id";
  $result = mysqli_query($con, $query);
$fruits= array();
while($row = mysqli_fetch_assoc($result))
 {
$fruits[] = $row;
 }
echo json_encode($fruits);


?>

使用 NG-repeat 分别打印出数据。我使用 ng-repeat 在 html 上显示

  <p ng-repeat="a in products ">
  {{a}}

{"id":"1","model":"test1","brand":"orange","price":"4",
 "description":"orange sweet and sour","image":"orange.jpg"}

{"id":"2","model":"test2","brand":"banana","price":"3",
 "description":"yellow sweet","image":"banana.jpg"}

{"id":"3","model":"test3","brand":"apple","price":"5",
 "description":" red sweet crunchy","image":"apple.jpg"}

【问题讨论】：

请在您的问题中包含产品数组的定义。
您能否将product 和searchText 添加到您的问题中？
myFilterBy 的参数e 将是一个对象（如ng-repeat 中的a）。您应该将其属性之一传递给 indexOf 而不是自己传递：return $scope.chk0.indexOf( e.somePropertyProbablyModel ) !== -1;
@jbrown 产品数组来自 mysql 表。它在没有 myFilterBy 函数的情况下完美加载。
@Claies searchText 只是一个从列表中搜索的文本框，它可以正常工作而无需添加额外的过滤器 myFilterBy（当我这样做时它什么也不加载。）

标签： javascript angularjs

【解决方案1】：

根据我从您的问题和后续 cmets 中可以看出，您只是试图通过用户输入的搜索文本和静态数组来过滤您的产品数组。

您的问题是您正在尝试将对象与字符串数组进行比较。要解决您的问题，您应该将对象属性（在本例中为品牌）与字符串数组进行比较。

您可以在下面看到它的工作原理。为简单起见，我删除了对这个问题不重要的所有代码。

var HandleModule = angular.module("HandleModule", []);
HandleModule.controller('HandleCtrl', function($scope) {
  $scope.chk0 = ['apple', 'orange', 'banana'];

  $scope.product = [{
    "id": "1",
    "model": "test1",
    "brand": "orange",
    "price": "4",
    "description": "orange sweet and sour",
    "image": "orange.jpg"
  }, {
    "id": "2",
    "model": "test2",
    "brand": "banana",
    "price": "3",
    "description": "yellow sweet",
    "image": "banana.jpg"
  }, {
    "id": "3",
    "model": "test3",
    "brand": "apple",
    "price": "5",
    "description": "red sweet crunchy",
    "image": "apple.jpg"
  }, {
    "id": "4",
    "model": "test4",
    "brand": "pear",
    "price": "6",
    "description": "red sweet crunchy",
    "image": "pear.jpg"
  }];

  $scope.myFilterBy = function(e) {
    return $scope.chk0.indexOf(e.brand) >= 0;
  };
});

<html ng-app="HandleModule">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="HandleCtrl">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search .." ng-model="searchText" />
  </div>
  <table>
    <tbody>
      <tr>
        <td ng-repeat="a in product| filter:searchText | filter:myFilterBy">
          <div>
            <p>{{a.brand}} {{a.model}} </p>
            <p>${{a.price}} </p>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【讨论】：

这很好用，这正是我所需要的，但我遇到的问题是这仅在我将数据数组添加到代码本身时才有效。如果我尝试使用导入的 php，它不会使用 | 加载任何内容。过滤器：myFilterBy 。如果我删除此过滤器，一切正常。将 chk0 设为空或保留数据中的确切值并没有什么不同 - 不会显示任何内容。