How to filter array with arraylist using ng-repeat

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. 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
$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. I used ng-repeat to display on 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.

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>

How to filter array with arraylist using ng-repeat

Question

1 answers

solution1
0 2018-05-21 13:30:16

How to filter array with arraylist using ng-repeat

Question

1 answers

solution1 0 2018-05-21 13:30:16

solution1
0 2018-05-21 13:30:16