filtering based on multpiple value
by Divya Manu
HTML
<div ng-app="myApp">
<div ng-controller="myCntrl">
<label>Search</label>
<input ng-model="query" type="text" placeholder="Search for name"/>
<table>
<tr>
<td>Name</td>
<td>Producer</td>
<td></td>
<td>Type</td>
<td>Packaging</td>
<td>Is it alcoholic?</td>
<td>Volume</td>
<td>Popularity</td>
<td>Country</td>
<td>Added</td>
<td>Price</td>
</tr>
<tr ng-repeat="item in products | filter: {'name': query} ">
<td>{{item.name}}</td>
<td>{{item.producer}}</td>
<td><img ng-src="img/{{item.picture}}.jpg" alt="{{item.name}}" height="50px"/></td>
<td>{{item.type}}</td>
<td>{{item.packaging}}</td>
<td>{{item.alko}}</td>
<td>{{item.volume}}</td>
<td>{{item.popularity}}</td>
<td>{{item.country}}</td>
<td>{{item.added}}</td>
<td>{{item.price}}</td>
</tr>
</table>
<div/>
</div>
JavaScript
angular.module('myApp', [])
.controller("myCntrl",function($scope){
$scope.query="";
$scope.products=[
{
"name" : "Sample Beer",
"producer" : "Great Beer Producer",
"picture" : "two",
"type" : "beer",
"packaging" : "glass",
"alko" : "yes",
"volume" : "1",
"popularity" : "1",
"country" : "Latvia",
"added" : "2015-01-03",
"price" : "20,40"
},{
"name" : "Sample Beer",
"producer" : "Great Cider Producer",
"picture" : "one",
"type" : "cider",
"packaging" : "plastic",
"alko" : "yes",
"volume" : "2",
"popularity" : "3",
"country" : "Estonia",
"added" : "2015-01-03",
"price" : "20,40"
},{
"name" : "Best Wine",
"producer" : "Wine for You",
"picture" : "eight",
"type" : "wine",
"packaging" : "glass",
"alko" : "yes",
"volume" : "2",
"popularity" : "5",
"country" : "Lithuania",
"added" : "2015-01-03",
"price" : "20,40"
},{
"name" : "Another Beer",
"producer" : "Beer Land",
"picture" : "seven",
"type" : "beer",
"packaging" : "aluminium",
"alko" : "no",
"volume" : "4",
"popularity" : "2",
"country" : "Latvia",
"added" : "2015-05-03",
"price" : "21,40"
}
]
});