How To Filter Through A Table Using Ng-repeat Checkboxes With Angularjs

Once upon a time this was working but somehow it's broken. I want to be able to produce checkboxes using ng-repeat to get as many checkboxes as required based on stored data and us

Solution 1:

Okay, here's how to do it.

First, let's add a couple of lines of CSS in your to make sure all the checkboxes are visible:

<style>.row { margin-left: 0px }
  input[type=checkbox] { margin-left: 30px; }
</style>

Next, add the following lines to your controller:

app.filter('unique', function() {

  returnfunction (arr, field) {
    var o = {}, i, l = arr.length, r = [];
    for(i=0; i<l;i+=1) {
      o[arr[i][field]] = arr[i];
    }
    for(i in o) {
      r.push(o[i]);
    }
    return r;
  };
})

  app.controller("maincontroller",function($scope){
    $scope.query = {};
    $scope.quer = {};
    $scope.queryBy = '$';
    $scope.isCollapsed = true;
    $scope.selectedRefs = [];

  $scope.myFilter = function (item) { 
    var idx = $scope.selectedRefs.indexOf(item.b);
    return idx != -1; 
  };

  $scope.toggleSelection = functiontoggleSelection(id) {
    var idx = $scope.selectedRefs.indexOf(id);
    if (idx > -1) {
      $scope.selectedRefs.splice(idx, 1);
    }
    else {
      $scope.selectedRefs.push(id);
    }
  };

Phew.

For some reason, your Plunkr's version of AngularJS didn't recognise the unique attribute, so I added one to your controller.

Finally, change your html to this:

<divclass="row"><labeldata-ng-repeat="x in projects | unique:'b' | orderBy:'b'" ><inputid="x.b"type="checkbox"ng-click="toggleSelection(x.b)"ng-init="selectedRefs.push(x.b)"ng-checked="selectedRefs.indexOf(x.b) > -1" />
        {{x.b}} 
    </label></div>

... and your ng-repeat to this...

<tr ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:myFilter | orderBy:orderProp">

If you're interested in knowing how this works, add these lines:

<divstyle="margin:10px 10px 30px 10px"><pre>{{ selectedRefs }} </pre></div>

I love this trick: you can see the exact contents of our "selectedRefs" array, and see it change as we tick/untick our checkboxes. This really helps when developing/testing our bindings!

As you can see, these changes use the new unique function to get your list of distinct values from your project array, and when the page first loads, we push all of the values into our new "selectedRefs" array.

["123","321","456","654","789","987"]

Then, as you tick/untick the checkboxes, we add/remove that item from this list.

Finally, we use that filter in the ng-repeat.

ng-repeat-start="x in projects | filter:myFilter | orderBy:orderProp"

Job done !

Update

If you wanted to start off with all checkboxes unticked, then it's a simple change. Just remove this line...

ng-init="selectedRefs.push(x.b)"

..and change the myFilter function to show all items initially..

$scope.myFilter = function (item) { 
    if ($scope.selectedRefs.length == 0)
        returntrue;

    var idx = $scope.selectedRefs.indexOf(item.b);
    return idx != -1; 
};

And to add a "Clear all" button, simply add a button to your form which calls a function in your AngularJS controller like this..

$scope.clearAll = function () { 
    $scope.selectedRefs = [];
};

(I haven't tested these suggestions though.)

Solution 2:

ng-false-value directive needs a value set. Try ng-false-value='false' or ng-false-value='null' (in fact you can skip this one entirely if it has to just be a falsy value and not something concrete, like a string or certain number).

As you've pointed out in the comments, after selecting and then clearing the checkboxes, all rows are filtered out. It happens because unchecking the checkbox will set its value to false, and this does not agree with your entities' values (as you probably know, just stating it for others).

Therefore you do need to set this value to empty string in the end. That'd be the way:

$scope.$watch('quer.$', function () {
  if ($scope.quer.$ === false) {
    $scope.quer.$ = '';
  }
});