如何使用ng-repeat用arraylist过滤数组

Question

I'm trying to filter an array with a simple array list but I can't seem to figure out how, I tried using a custom filter but I can't make it work. 我正在尝试使用简单的数组列表筛选一个数组，但似乎无法弄清楚如何，我尝试使用自定义筛选器，但无法使其正常工作。 Edit: I've added more code. 编辑：我添加了更多的代码。 Text box Search works fine but when I add the myFilterby on the ng-repeat it no longer filters. 文本框搜索工作正常，但是当我在ng-repeat上添加myFilterby时，它不再进行过滤。 I simply want to filter out an array list. 我只是想过滤出一个数组列表。

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

Angular: 角度：

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：

 <?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);


?>

Used NG-repeat to print out the data separately. 使用NG-repeat分别打印出数据。 I used ng-repeat to display on html 我用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"}

Answer 1

From what I can decipher from your question and subsequent comments, you are simply trying to filter your product array by search text that is input by the user and a static array. 根据我对问题和后续评论的理解，您只是在尝试通过用户输入的搜索文本和静态数组来过滤产品数组。

Your issue is that you are trying to compare an object to an array of strings. 您的问题是您试图将一个对象与字符串数组进行比较。 To fix your problem you should compare an object property, in this case brand, against the array of strings. 要解决您的问题，您应该将对象属性（在这种情况下为brand）与字符串数组进行比较。

You can see it working below. 您可以在下面看到它的工作。 For simplicity I have removed any code that wasn't essential to this issue. 为简单起见，我删除了对于此问题不是必需的所有代码。

 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>

如何使用ng-repeat用arraylist过滤数组

问题描述

1 个解决方案

解决方案1
0 2018-05-21 13:30:16

如何使用ng-repeat用arraylist过滤数组

问题描述

1 个解决方案

解决方案1 0 2018-05-21 13:30:16

解决方案1
0 2018-05-21 13:30:16