复选框列表ng-repeat过滤器动态angularjs

Question

I am trying in AngularJS to display the employee details with dynamic filter (Location - Value like US, IN, CA etc..) as checkboxlist based on the data got it from DB. 我正在AngularJS中尝试根据数据库从数据中获取的动态列表（位置-值，例如US，IN，CA等）显示员工详细信息作为复选框。 I have tried multiple ways without success. 我尝试了多种方法但均未成功。 Please help to achive the dynamic filter from Checkboxlist. 请帮助获得Checkboxlist中的动态过滤器。

My code sample below: 我的代码示例如下：

  <html>
<body ng-app="myapp" ng-controller="myController">


     <div >Location</div>
        <table>
            <tbody>
                <tr ng-repeat="empL in EmpResult | unique : 'Location'">
                    <td>
                        <span>
                            <input type="checkbox" ng-model="loc" value={{empL.Location}} />
                            {{empL.Location}}
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
    <table align="left" style="width: 100%" class="table">
        <thead>
            <tr>

                <th align="left" style="width: 30%">Employee</th>
                <th align="left" style="width: 20%">Address</th>
                <th align="left" style="width: 15%">Location</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="empN in EmpResult | filter : loc">

                <td align="left" style="width: 30%">{{empN.EmpName}}</td>
                <td align="left" style="width: 10%">{{empN.Address}}</td>
                <td align="left" style="width: 15%">{{empN.Location}}</td>

            </tr>
        </tbody>
    </table>

    <script type="text/javascript">

        var myapp = angular.module('myapp', ['ui.unique'])
        .controller("myController", function ($scope, $http) {

            $http({
                method: 'Get',
                params: { strName: $scope.strName },
                url: 'Emp.asmx/GetEmpbyName'
            }).then(function (response) {
                $scope.EmpResult = response.data;
            })

        });
    </script>
</body>
</html>

Answer 1

I've created a mirror of your issue, please take a look at it. 我已为您制作了一个问题的镜子，请看一看。 I think it should work in your situation. 我认为它应该适合您的情况。

Plunker 柱塞

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script> document.write('<base href="' + document.location + '" />'); </script> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> </head> <body ng-app="myApp" ng-controller="myController"> <div ng-init="init()">Location</div> <table> <tbody> <tr ng-repeat="empL in locations"> <td> <span> <input type="checkbox" name="locations + $index" data-ng-model="locChkBox.loc[$index]" ng-true-value="'{{empL}}'" ng-false-value="" ng-change="repopulate()"/> {{empL}} </span> </td> </tr> </tbody> </table> <table align="left" style="width: 100%" class="table"> <thead> <tr> <th align="left" style="width: 30%">Employee</th> <th align="left" style="width: 20%">Address</th> <th align="left" style="width: 15%">Location</th> </tr> </thead> <tbody> <tr ng-repeat="empN in EmpResult | filter : locFilter "> <td align="left" style="width: 30%">{{empN.EmpName}}</td> <td align="left" style="width: 10%">{{empN.Address}}</td> <td align="left" style="width: 15%">{{empN.Location}}</td> </tr> </tbody> </table> <script> var myApp = angular.module('myApp', []); myApp.controller("myController", ['$scope', '$http', function($scope, $http) { $scope.locations = []; $scope.search = {}; $scope.locChkBox = {}; $scope.locChkBox.loc = []; $scope.locChkBox.loc.push("US"); $scope.init = function() { $scope.EmpResult = JSON.parse('[{"EmpName":"jondoe","Address":"dummyAddr","Location":"US"},{"EmpName":"jondoe2","Address":"dummyAddr2","Location":"IN"},{"EmpName":"jondoe3","Address":"dummyAddr3","Location":"CA"},{"EmpName":"jondoe4","Address":"dummyAddr4","Location":"US"},{"EmpName":"jondoe5","Address":"dummyAddr5","Location":"IN"},{"EmpName":"jondoe6","Address":"dummyAddr6","Location":"CA"},{"EmpName":"jondoe7","Address":"dummyAddr7","Location":"US"},{"EmpName":"jondoe8","Address":"dummyAddr8","Location":"IN"},{"EmpName":"jondoe9","Address":"dummyAddr9","Location":"CA"},{"EmpName":"jondoe11","Address":"dummyAddr11","Location":"US"},{"EmpName":"jondoe22","Address":"dummyAddr22","Location":"IN"}]'); var flags = [], output = [], l = $scope.EmpResult.length, i; for (i = 0; i < l; i++) { if (flags[$scope.EmpResult[i].Location]) continue; flags[$scope.EmpResult[i].Location] = true; output.push($scope.EmpResult[i].Location); } $scope.locations = output; }; $scope.locFilter = function(item) { for (var i = 0; i < $scope.locChkBox.loc.length; i++) { if (item.Location === $scope.locChkBox.loc[i]) return true; } return false; }; }]); </script> </body> </html>

EDIT 2 编辑2

This code will display all the values if none of the checkbox is selected. 如果未选中任何复选框，此代码将显示所有值。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script> document.write('<base href="' + document.location + '" />'); </script> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> </head> <body ng-app="myApp" ng-controller="myController"> <div ng-init="init()">Location</div> <table> <tbody> <tr ng-repeat="empL in locations"> <td> <span> <input type="checkbox" name="locations + $index" data-ng-model="locChkBox.loc[$index]" ng-true-value="'{{empL}}'" ng-false-value="" ng-change="repopulate()"/> {{empL}} </span> </td> </tr> </tbody> </table> <table align="left" style="width: 100%" class="table"> <thead> <tr> <th align="left" style="width: 30%">Employee</th> <th align="left" style="width: 20%">Address</th> <th align="left" style="width: 15%">Location</th> </tr> </thead> <tbody> <tr ng-repeat="empN in EmpResult | filter : locFilter "> <td align="left" style="width: 30%">{{empN.EmpName}}</td> <td align="left" style="width: 10%">{{empN.Address}}</td> <td align="left" style="width: 15%">{{empN.Location}}</td> </tr> </tbody> </table> <script> var myApp = angular.module('myApp', []); myApp.controller("myController", ['$scope', '$http', function($scope, $http) { $scope.locations = []; $scope.search = {}; $scope.locChkBox = {}; $scope.locChkBox.loc = []; $scope.init = function() { $scope.EmpResult = JSON.parse('[{"EmpName":"jondoe","Address":"dummyAddr","Location":"US"},{"EmpName":"jondoe2","Address":"dummyAddr2","Location":"IN"},{"EmpName":"jondoe3","Address":"dummyAddr3","Location":"CA"},{"EmpName":"jondoe4","Address":"dummyAddr4","Location":"US"},{"EmpName":"jondoe5","Address":"dummyAddr5","Location":"IN"},{"EmpName":"jondoe6","Address":"dummyAddr6","Location":"CA"},{"EmpName":"jondoe7","Address":"dummyAddr7","Location":"US"},{"EmpName":"jondoe8","Address":"dummyAddr8","Location":"IN"},{"EmpName":"jondoe9","Address":"dummyAddr9","Location":"CA"},{"EmpName":"jondoe11","Address":"dummyAddr11","Location":"US"},{"EmpName":"jondoe22","Address":"dummyAddr22","Location":"IN"}]'); var flags = [], output = [], l = $scope.EmpResult.length, i; for (i = 0; i < l; i++) { if (flags[$scope.EmpResult[i].Location]) continue; flags[$scope.EmpResult[i].Location] = true; output.push($scope.EmpResult[i].Location); } $scope.locations = output; }; $scope.locFilter = function(item) { if($scope.locChkBox.loc.isNull()) return true; for (var i = 0; i < $scope.locChkBox.loc.length; i++) { if (item.Location === $scope.locChkBox.loc[i]) return true; } return false; }; }]); Array.prototype.isNull = function (){ return this.join().replace(/,/g,'').length === 0; }; </script> </body> </html>

Answer 2

<tr ng-repeat="empN in EmpResult | filter : 'loc'">

Use the filter with single quotes also. 还将过滤器与单引号一起使用。 This will filter the data from checkbox. 这将从复选框中过滤数据。

复选框列表ng-repeat过滤器动态angularjs

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-08-01 05:41:24

解决方案2
1 2016-08-01 05:18:36

复选框列表ng-repeat过滤器动态angularjs

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-08-01 05:41:24

解决方案2 1 2016-08-01 05:18:36

解决方案1
2 已采纳 2016-08-01 05:41:24

解决方案2
1 2016-08-01 05:18:36