Checkboxlist ng-repeat filter dynamic 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. I have tried multiple ways without success. Please help to achive the dynamic filter from 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>

To the best of my knowledge, filters do not work that way. You have to define an actual filter method (not just using a scope variable the way you are doing). Check the documentation. Here you have a good description and very simple example that quite matches your needs: docs.angularjs.org/api/ng/filter/filter — FDavidov
– FDavidov, Commented Aug 1, 2016 at 5:12
@FDavidov that's true but the filter that @Ravi is using comes from the dependency 'ui.unique' that he have injected in his module and so it needs not to be defined. However this dependency is depreciated, so my question is why to use a depreciated dependency? — Raman Sahasi
– Raman Sahasi, Commented Aug 1, 2016 at 5:26

Raman Sahasi · Accepted Answer · 2016-08-01 16:30:20Z

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="[email protected]" 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

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="[email protected]" 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>

when i have revamped the code, I made the mistake but in my actual code have the ng-app and ng-controller in body tag.
thanks for your code it is working for me but by default it is filtering out by Location as "US" but on initial load, I want to display all records without any filter. Also the filter is working without ng-change="repopulate()"
Hi @Ravi , Please see my updated EDIT2 code. This code will show all the results if none of the checkbox is selected and if any of them is selected, then it will display results according to that.
Hi @Raman, thanks for your quick response. it is working as I expected. Appreciate your help.

Stark Buttowski · Accepted Answer · 2016-08-01 05:18:36Z

1

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

Use the filter with single quotes also. This will filter the data from checkbox.

answered Aug 1, 2016 at 5:18

Stark Buttowski

1,8492 gold badges11 silver badges21 bronze badges

Collectives™ on Stack Overflow

Checkboxlist ng-repeat filter dynamic angularjs

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related