Soumya Soumya - 5 months ago 8
AngularJS Question

Angular JS: Filter by multiple Names in One column

I am newbie to Angular JS. Purpose is show the stock of different sizes in one text box.


For Eg:If user type 180 as well as 375 then for those sizes, stock should be Shown.


HTML:

<div ng-app="myApp" ng-controller="myCtrl">
<div>
<table>
<tr>
<td>Search</td>
<td><input type="text" name="search" ng-model="search"/></td>
</tr>
</table>
</div>
<table>
<tr>
<th>Size</th>.
<th>Stock</th>
</tr>

<tr ng-repeat = "subject in records| filter:search">
<td>{{ subject.size}}<td>
<td>{{ subject.stock }}</td>
</tr>

</table>

</div>


Angular JS:

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
$scope.records = [
{
"size" : "180",
"stock" : 250
},{
"size" : "180",
"stock" : 150
},{
"size" : "375",
"stock" : 100
},{
"size" : "750",
"stock" : 150
},{
"size" : "1000",
"stock" : 750
},{
"size" : "750",
"stock" : 1500
},{
"size" : "180",
"stock" : 500
},{
"size" : "375",
"stock" : 650
}
]



});
</script>


Expected Output:

Search Box : 180,375
Size Stock
180 250
180 150
180 500
375 100
375 650


IS it possible I had no idea.If yes, Please suggest me.Thanks in advance.

Answer

You can create custom filter like this: https://plnkr.co/edit/8FY2RnyE0AEgb659nkPe?p=preview

app.filter("multiple", function($filter) {
  return function(items, query) {
    return $filter('filter')(items, "size", function(v) {
      return query.indexOf(v.size) > -1;
    });
  };
});  
Comments