checkbox options = select options - angularjs

问题

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

回答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

回答2:

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="angular.js@1.3.x" 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

来源：https://stackoverflow.com/questions/29208907/checkbox-options-select-options-angularjs