如何使用ng-repeat用arraylist過濾數組

Question

我正在嘗試使用簡單的數組列表篩選一個數組，但似乎無法弄清楚如何，我嘗試使用自定義篩選器，但無法使其正常工作。 編輯：我添加了更多的代碼。 文本框搜索工作正常，但是當我在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"}

Answer 1

根據我對問題和后續評論的理解，您只是在嘗試通過用戶輸入的搜索文本和靜態數組來過濾產品數組。

您的問題是您試圖將一個對象與字符串數組進行比較。 要解決您的問題，您應該將對象屬性（在這種情況下為brand）與字符串數組進行比較。

您可以在下面看到它的工作。 為簡單起見，我刪除了對於此問題不是必需的所有代碼。

 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