Having trouble filtering or searching for relevant data using a dropdown input? The task is to select an option from the dropdown and click on the button to filter or display the corresponding data in a table using Angular. Directly achieving this works, but there's an issue with the click event. Seeking assistance as new to Angular. Below is the code:
HTML:
Filter:
<select ng-model = "filterItem.store" ng-options="item.name for item in filterOptions.stores">
</select>
<button>search</button>
<table>
<tr>
<th>Name</th>
<th>Price</th>
<th>Rating</th>
</tr>
<tr ng-repeat="item in data | filter:customFilter">
<td ng-click="">
{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.rating}}</td>
</tr>
</table>
JS File:
$scope.customFilter = function(data) {
if (data.rating === $scope.filterItem.store.rating) {
return true;
} else if ($scope.filterItem.store.rating === 6) {
return true;
} else {
return false;
}
};
//The displayed data
$scope.data = [
{
name: "product1",
price: 198,
rating: 1
},
{
name: "product2",
price: 200,
rating: 5
},
{
name: "product3",
price: 200,
rating: 2
},
{
name: "product4",
price: 10,
rating: 3
},
{
name: "product5",
price: 200,
rating: 3
},
{
name: "product6",
price: 400,
rating: 5
}
Plunker: