javascript - 复选框选项=选择选项-AngularJS

Question

我已成功填充 Designations 以通过 Json 选择选项，现在我想为我的搜索结果创建多个复选框过滤器。

下面是选择选项的工作代码

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

我的这段代码有两个问题。

1.当前选择选项中的空值(想要删除它)

2.使其发挥复选框选项的作用

我希望我已经给出了详细信息

Answer 1

删除空值:

在添加item之前检查真值并添加

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

关于复选框:您需要创建一个自定义过滤器才能使其工作。

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;
      })
    }
  });

在 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}}

您正在迭代指定，但打印 search.designation 这就是不存在任何值的原因。

在 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