I am using Angularjs and have a dropdownlist with “Any State” or “New York”,“New Jersey” etc and based on selection of dropdownlist value I should display the products in the Grid that are available in each state with columns “Product Name” ,“Availabilty”. The “Availabilty” column contain value either “All States” or individual state name’s such as (California,Michigan) or (New Jersey,New York) etc .For instance if I select “Any State” in the dropdown and Grid should display all records and if I select “New Jersey” state it should display records with “Availabilty” column value either “All States” and “New Jersey,New York”
I have a example here in fiddler http://jsfiddle.net/s2Ff9/9/ and I stuck at filterdata function in the controller that filters data based on dropdown selection and I believe should have foreach and indexOf methods to achieve this.Any sample code for filterdata function would be highly appreciated.
This is almost a straightforward filtering exercise. The part that bites you is the “Any State” stuff, which means you may need a custom filter to handle that custom logic.
var myApp = angular.module("myApp", []);
[COLOR="#FF0000"] // Define a custom filter
myApp.filter("filterProductsByState", function () {
return function (products, selectedState) {
var filteredProducts = [];
for (var i = 0; i < products.length; i++) {
var product = products[i];
if (
// If no filter state was selected,
// or if we're searching in any state,
// then pass this product through
!selectedState || selectedState.text === "Any State"
// Or if the product is available in all states, then pass this product through
|| product.avail === "All States"
// Finally, if the selected state is in the product's states string, then pass this product through
|| product.avail.indexOf(selectedState.text) !== -1
) {
filteredProducts.push(product);
}
}
return filteredProducts;
};
});[/COLOR]
var myCtrl = myApp.controller("myCtrl", ["$scope", function ($scope) {
$scope.products = [
{name:"Product1", avail:"All States"},
{name:"Product2", avail:"New [COLOR="#FF0000"]Y[/COLOR]ork,Richmond"},
{name:"Product3", avail:"Michigan,California"},
{name:"Product4", avail:"All States"},
{name:"Product5", avail:"All States"}
];
$scope.states = [
{ value: 'Any', text: 'Any State' },
{ value: 'NY', text: 'New York' },
{ value: 'CA', text: 'California' },
{ value: 'MI', text: 'Michigan' }
];
}]);
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedState" ng-options="s.text for s in states"></select>
<table>
<tr ng-repeat="product in products[COLOR="#FF0000"] | filterProductsByState:selectedState[/COLOR]"><td>{{product.name}}</td><td>{{product.avail}}</td></tr>
</table>
</div>