0

I have successfully populated Designations to select option through Json and now i wanted to create multiple checkbox filter to my search results..

Here below is the working code for select option 

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var json = {
    "modules": [{
      "myid": "70",
      "realname": "Kishore",
      "full_name": "Kishore Chandra",
      "category": "professional",
      "firm_name": "Yes",
      "designation": "Design-Build Firm",
      "address": "Dwarakanagar 5th lane"
    }, {
      "myid": "75",
      "realname": "Vinod kumar",
      "full_name": "Kishore Chandra",
      "category": "professional",
      "firm_name": "",
      "designation": null,
      "address": null
    }, {
      "myid": "76",
      "realname": "Pradeep Reddy",
      "full_name": "PRADEEP REDDY",
      "category": "professional",
      "firm_name": "",
      "designation": "Civil Engineer",
      "address": "Visakapatnam, Andhra Pradesh, India"
    }, {
      "myid": "78",
      "realname": "Pradeep Raju",
      "full_name": "",
      "category": "professional",
      "firm_name": "",
      "designation": null,
      "address": null
    }, {
      "myid": "79",
      "realname": "Pradeep kumar",
      "full_name": "",
      "category": "professional",
      "firm_name": "",
      "designation": null,
      "address": null
    }, {
      "myid": "80",
      "realname": "Pradeep",
      "full_name": "Pradeep",
      "category": "professional",
      "firm_name": "",
      "designation": "Architect",
      "address": "Akkayapalem"
    }, {
      "myid": "81",
      "realname": "Pradeep",
      "full_name": "Pradeep Reddy ",
      "category": "professional",
      "firm_name": "",
      "designation": "Civil Engineer",
      "address": "Jubliee Hills"
    }, {
      "myid": "82",
      "realname": "krishna",
      "full_name": "",
      "category": "professional",
      "firm_name": "",
      "designation": null,
      "address": null
    }, {
      "myid": "83",
      "realname": "raghu",
      "full_name": "",
      "category": "professional",
      "firm_name": "",
      "designation": null,
      "address": null
    }, {
      "myid": "84",
      "realname": "Pradeep",
      "full_name": "",
      "category": "professional",
      "firm_name": "",
      "designation": null,
      "address": null
    }, {
      "myid": "85",
      "realname": "Pradeep",
      "full_name": "",
      "category": "professional",
      "firm_name": "",
      "designation": null,
      "address": null
    }, {
      "myid": "86",
      "realname": "Pradeep",
      "full_name": "",
      "category": "professional",
      "firm_name": "",
      "designation": null,
      "address": null
    }, {
      "myid": "87",
      "realname": "Pradeep",
      "full_name": "",
      "category": "professional",
      "firm_name": "",
      "designation": null,
      "address": null
    }, {
      "myid": "88",
      "realname": "Pradeep",
      "full_name": "",
      "category": "professional",
      "firm_name": "",
      "designation": null,
      "address": null
    }, {
      "myid": "89",
      "realname": "Pradeep",
      "full_name": "",
      "category": "professional",
      "firm_name": "",
      "designation": null,
      "address": null
    }, {
      "myid": "72",
      "realname": "recobee",
      "full_name": "Kishore Chandra",
      "category": "vendor",
      "firm_name": "Recobee",
      "designation": "Hardware",
      "address": "55-2-27\/1, Old Venkojipalem, Near Andhra Bank, Hb Colony Road"
    }, {
      "myid": "90",
      "realname": "Vinod kumar",
      "full_name": "Tiles Vendor",
      "category": "vendor",
      "firm_name": "Vendor1",
      "designation": "Tiles",
      "address": "akkayapalem, "
    }, {
      "myid": "92",
      "realname": "Vamsi Vytla",
      "full_name": "vamsi vytla",
      "category": "vendor",
      "firm_name": "vytla cements",
      "designation": "Cement Suppliers",
      "address": "akkayapalem"
    }, {
      "myid": "93",
      "realname": "Bhaskar",
      "full_name": "Surya Bhaskar",
      "category": "vendor",
      "firm_name": "Talatam",
      "designation": "Doors and Windows",
      "address": "Hitech city"
    }, {
      "myid": "94",
      "realname": "Naren",
      "full_name": "Naren Mandala",
      "category": "vendor",
      "firm_name": "Mandala Hardwares",
      "designation": "Hardware",
      "address": "Malleshwaram road"
    }, {
      "myid": "95",
      "realname": "Sreetej",
      "full_name": "Sreetej Vincent",
      "category": "vendor",
      "firm_name": "Vincent Paints",
      "designation": "Paintings",
      "address": "Navi Mumbai"
    }, {
      "myid": "96",
      "realname": "Raja",
      "full_name": "Ramesh Raja Galla",
      "category": "vendor",
      "firm_name": "Galla plumbing ",
      "designation": "Plumbing & Bathware",
      "address": "Karol Bagh "
    }, {
      "myid": "97",
      "realname": "Prasanna kumar",
      "full_name": "Prasanna kumar",
      "category": "vendor",
      "firm_name": "JP cement",
      "designation": "Cement Suppliers",
      "address": "poonamalle road"
    }, {
      "myid": "98",
      "realname": "Phalgun",
      "full_name": "Phalgun Moturu",
      "category": "vendor",
      "firm_name": "Moturu Tiles",
      "designation": "Tiles",
      "address": "benz circle"
    }, {
      "myid": "99",
      "realname": "Pavan",
      "full_name": "Pavan kumar",
      "category": "vendor",
      "firm_name": "Pavan Constructions",
      "designation": "Cement Suppliers",
      "address": "Jubliee hills"
    }]
  };

  $scope.ocw = json;

  var allCategories = json.modules.map(function(item) {
    return item.designation
  });
  var filteredCategories = [];


  allCategories.forEach(function(item) {
    if (filteredCategories.indexOf(item) < 0 && item) {
      filteredCategories.push(item);
    }
  });



  $scope.categories = filteredCategories;
});
<html ng-app="plunker">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-controller="MainCtrl">
  <form>
    <div ng-repeat="designation in categories">
      <input type="checkbox" ng-model="search.designation" name="search.designation{{$index}}" checklist-value="search.designation">{{designation}}
    </div>
    <label>Category
      <select ng-model="search.designation" ng-options="category for category in categories"></select>
    </label>
    Designation :
    <input type="text" ng-model="search.designation">Real name :
    <input type="text" ng-model="search.realname">
  </form>
  <table class="table table-bordered" ng-repeat="module in ocw.modules | filter:search">
    <tr>
      <td>
        <h3 class="moduletitle">Name : {{ module.realname }}</h3>

        <p>Designation : {{ module.designation }}</p>
        <p>Category : {{ module.category }}</p>
        <p>Fullname : {{ module.full_name }}</p>
      </td>
    </tr>
  </table>
</body>

</html>

Plunker Code

i have 2 problems in this code.

1 . null value in present select option (want to remove it)

2 . Make it work of Check Box Options

I hope i have given in detail

Improve this question
0

2 Answers 2

Reset to default
1

To remove null values:

Before adding item check for truth value and add

allCategories.forEach(function(item) {
     if(filteredCategories.indexOf(item) < 0 && item) {
         filteredCategories.push(item);
     }
  });

Regarding checkbox: You need to create a custom filter for that to work.

app.filter("selectedDesignation", function() {
    return function(module, tags) {
      if (tags.length < 1) return module;
      return module.filter(function(mod) {
        return (tags.indexOf(mod.designation) > 0) ? true : false;
      })
    }
  });

In your HTML:

 <table class="table table-bordered" ng-repeat="module in ocw.modules | filter:search.designation | selectedDesignation: search.tags">


  <input type="checkbox" ng-click="updateFilter(designation)" > {{designation}}

You're iterating through designation but printing search.designation that's why no values are present.

In Controller: 

 $scope.search = {
    designation: "",
    tags: []
  }
  $scope.updateFilter = function(value) {
    if ($scope.search.tags.indexOf(value) < 0) $scope.search.tags.push(value);
    else $scope.search.tags.splice($scope.search.tags.indexOf(value), 1)
  }

DEMO

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I have updated the Plunker Code. but search with checkbox not working can you explain or workout with that code?
Working fine but Multiple check box filtering not working in that.
Yes, you need to create custom filter for that.
0

Finally Solved i have replaced Select Options to Check Box Options

And Working with Multi select Also

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    var json = {
        "modules": [{
            "myid": "70",
            "realname": "Kishore",
            "full_name": "Kishore Chandra",
            "category": "professional",
            "firm_name": "Yes",
            "designation": "Design-Build Firm",
            "address": "Dwarakanagar 5th lane"
        }, {
            "myid": "75",
            "realname": "Vinod kumar",
            "full_name": "Kishore Chandra",
            "category": "professional",
            "firm_name": "",
            "designation": null,
            "address": null
        }, {
            "myid": "76",
            "realname": "Pradeep Reddy",
            "full_name": "PRADEEP REDDY",
            "category": "professional",
            "firm_name": "",
            "designation": "Civil Engineer",
            "address": "Visakapatnam, Andhra Pradesh, India"
        }, {
            "myid": "78",
            "realname": "Pradeep Raju",
            "full_name": "",
            "category": "professional",
            "firm_name": "",
            "designation": null,
            "address": null
        }, {
            "myid": "79",
            "realname": "Pradeep kumar",
            "full_name": "",
            "category": "professional",
            "firm_name": "",
            "designation": null,
            "address": null
        }, {
            "myid": "80",
            "realname": "Pradeep",
            "full_name": "Pradeep",
            "category": "professional",
            "firm_name": "",
            "designation": "Architect",
            "address": "Akkayapalem"
        }, {
            "myid": "81",
            "realname": "Pradeep",
            "full_name": "Pradeep Reddy ",
            "category": "professional",
            "firm_name": "",
            "designation": "Civil Engineer",
            "address": "Jubliee Hills"
        }, {
            "myid": "82",
            "realname": "krishna",
            "full_name": "",
            "category": "professional",
            "firm_name": "",
            "designation": null,
            "address": null
        }, {
            "myid": "83",
            "realname": "raghu",
            "full_name": "",
            "category": "professional",
            "firm_name": "",
            "designation": null,
            "address": null
        }, {
            "myid": "84",
            "realname": "Pradeep",
            "full_name": "",
            "category": "professional",
            "firm_name": "",
            "designation": null,
            "address": null
        }, {
            "myid": "85",
            "realname": "Pradeep",
            "full_name": "",
            "category": "professional",
            "firm_name": "",
            "designation": null,
            "address": null
        }, {
            "myid": "86",
            "realname": "Pradeep",
            "full_name": "",
            "category": "professional",
            "firm_name": "",
            "designation": null,
            "address": null
        }, {
            "myid": "87",
            "realname": "Pradeep",
            "full_name": "",
            "category": "professional",
            "firm_name": "",
            "designation": null,
            "address": null
        }, {
            "myid": "88",
            "realname": "Pradeep",
            "full_name": "",
            "category": "professional",
            "firm_name": "",
            "designation": null,
            "address": null
        }, {
            "myid": "89",
            "realname": "Pradeep",
            "full_name": "",
            "category": "professional",
            "firm_name": "",
            "designation": null,
            "address": null
        }, {
            "myid": "72",
            "realname": "recobee",
            "full_name": "Kishore Chandra",
            "category": "vendor",
            "firm_name": "Recobee",
            "designation": "Hardware",
            "address": "55-2-27\/1, Old Venkojipalem, Near Andhra Bank, Hb Colony Road"
        }, {
            "myid": "90",
            "realname": "Vinod kumar",
            "full_name": "Tiles Vendor",
            "category": "vendor",
            "firm_name": "Vendor1",
            "designation": "Tiles",
            "address": "akkayapalem, "
        }, {
            "myid": "92",
            "realname": "Vamsi Vytla",
            "full_name": "vamsi vytla",
            "category": "vendor",
            "firm_name": "vytla cements",
            "designation": "Cement Suppliers",
            "address": "akkayapalem"
        }, {
            "myid": "93",
            "realname": "Bhaskar",
            "full_name": "Surya Bhaskar",
            "category": "vendor",
            "firm_name": "Talatam",
            "designation": "Doors and Windows",
            "address": "Hitech city"
        }, {
            "myid": "94",
            "realname": "Naren",
            "full_name": "Naren Mandala",
            "category": "vendor",
            "firm_name": "Mandala Hardwares",
            "designation": "Hardware",
            "address": "Malleshwaram road"
        }, {
            "myid": "95",
            "realname": "Sreetej",
            "full_name": "Sreetej Vincent",
            "category": "vendor",
            "firm_name": "Vincent Paints",
            "designation": "Paintings",
            "address": "Navi Mumbai"
        }, {
            "myid": "96",
            "realname": "Raja",
            "full_name": "Ramesh Raja Galla",
            "category": "vendor",
            "firm_name": "Galla plumbing ",
            "designation": "Plumbing & Bathware",
            "address": "Karol Bagh "
        }, {
            "myid": "97",
            "realname": "Prasanna kumar",
            "full_name": "Prasanna kumar",
            "category": "vendor",
            "firm_name": "JP cement",
            "designation": "Cement Suppliers",
            "address": "poonamalle road"
        }, {
            "myid": "98",
            "realname": "Phalgun",
            "full_name": "Phalgun Moturu",
            "category": "vendor",
            "firm_name": "Moturu Tiles",
            "designation": "Tiles",
            "address": "benz circle"
        }, {
            "myid": "99",
            "realname": "Pavan",
            "full_name": "Pavan kumar",
            "category": "vendor",
            "firm_name": "Pavan Constructions",
            "designation": "Cement Suppliers",
            "address": "Jubliee hills"
        }]
    };

    $scope.ocw = json;

    var allCategories = json.modules.map(function(item) {
        return item.designation
    });
    var filteredCategories = [];


    allCategories.forEach(function(item) {
        if (filteredCategories.indexOf(item) < 0 && item) {
            filteredCategories.push(item);
        }
    });

    $scope.search = {
        designation: ""
    }

    $scope.categories = filteredCategories;

    $scope.isFiltered = function(val) {
        return $scope.search.designations[val.designation];
    }
});
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
    <form>
        <div ng-repeat="designation in categories">
            <input type="checkbox" ng-model="search.designations[designation]"> {{designation}}
        </div>
        Full name: <input type="text" ng-model="search.full_name">
    </form>
    <table class="table table-bordered" ng-repeat="module in ocw.modules | filter:isFiltered | filter:{full_name:search.full_name}">
        <tr>
            <td>
                <h3 class="moduletitle">Name : {{ module.realname }}</h3>
                <p>Designation : {{ module.designation }}</p>
                <p>Category : {{ module.category }}</p>
                <p>Fullname : {{ module.full_name }}</p>
            </td>
        </tr>
    </table>
</body>

</html>

http://plnkr.co/edit/QNS5iX3atZ8C7lrG1gyU?p=preview

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.