复选框选项=选择选项 - angularjs

时间：2015-03-23 11:17:27

标签： javascript jquery angularjs angularjs-ng-repeat

我已经成功填充了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。使其可用于复选框选项

我希望我已经详细说明了

2 个答案:

答案 0 :(得分：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，这就是为什么没有值存在的原因。

在控制器中：

 $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

答案 1 :(得分：0)

最终解决了我已将 选择 替换为 复选框选项

使用Multi选择

＆＃13;
＆＃13; 
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];
    }
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

相关问题
最新问题