SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    foreach and indexOf using Angularjs

    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.

    Thanks in Advance

  2. #2
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,314
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    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.

    Code:
        var myApp = angular.module("myApp", []);
    
        // 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;
            };
        });
    
        var myCtrl = myApp.controller("myCtrl", ["$scope", function ($scope) {
            $scope.products = [
                {name:"Product1", avail:"All States"},
                {name:"Product2", avail:"New York,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' }
            ];
        }]);
    Code:
    <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 | filterProductsByState:selectedState"><td>{{product.name}}</td><td>{{product.avail}}</td></tr>
        </table>
    </div>
    "First make it work. Then make it better."

  3. #3
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jeff, Thank you so much. I have added filter and it's working fine.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •