Dynamically create filter and matching checkboxes in AngularJs

Question

I have many data points, with several types;

JSON file:

{
  "items":[
    {
      "id:": 1,
      "type": "type1", //typeN isn't tied to id=N
      ... : ...
    },
    {
      "id:": 2,
      "type": "anotherType",
      ... : ...
    },
    {...},{...},{...},...
  ]
}

I want to filter these results with checkboxes in the DOM. So first I want to get them into the DOM. So I need to find the unique types in the data. I do this through this function in the Controller:

var itemTypeList = function(){
  if ($scope.hasOwnProperty('allItems')){ //this is to ensure async load completed
    var uniqTypes = [];
    for (var i=0 ; i < $scope.allItems.length ; i++){
      if (uniqTypes.indexOf($scope.allItems[i].type) < 0){
        uniqTypes.push($scope.allItems[i].type);
      }
    }
    $scope.uniqTypes = uniqTypes;
    return $scope.uniqTypes;
  }
};

and then I place them in the HTML like so:

<!-- These are what will be shown/hidden -->
<div class="">
  <div class="col-md-4" ng-repeat="item in allItems | filter:showItem">
    {{item.name}}
  </div>
</div>

<!-- this is the filter section -->
<div class="col-md-12" ng-repeat="uT in uniqTypes">
  <label>{{uT}}</label>
  <!-- here is where the accompanying checkbox should go -->
</div>

So far, my Controller Filter looks like this:

$scope.showItem = function(item){
   return item.type === $scope.Filter.item1 || 
     item.type === $scope.Filter.type2;
     //this is static, and I only typed 2 of the many....
};

and the input check box looks like

<input type="checkbox" ng-model="Filter.uT" ng-true-value="{{uT}}"/><br/>

The problem is that the filter is static, and I had to manually put in the types. The second problem is that the checkbox ng-model can't be defined like so ng-model="Filter.{{uT}}". I can only find examples of statically defined models. How do I change the filter and the input ng-repeat to use the uniqueTypes (uT) that I have already found?

chris Frisina · Accepted Answer · 2014-06-09 15:07:22Z

2

Can't see the whole picture, but it seems like you want something like this:

<div class="col-md-12" ng-repeat="uT in uniqTypes">
  <label>{{uT}}</label>
  <input type="checkbox" ng-model="Filter[uT]"/>
</div>

value of checkbox will be true or false --> $scope.Filter.type2 will be true/false

$scope.Filter = {};

$scope.showItem = function(item){
   return $scope.Filter[item.type];
};

will return true or false

fiddle of the basic version

If you want to have them showing initially, and click to unhide, the $scope.Filter needs to be populated first by a key[val] pair. This can be done when you dynamically create the uniqueTypes list.

Here is this fiddle of it showing and checked initially

edited Jun 9, 2014 at 15:07

chris Frisina

19.3k24 gold badges91 silver badges173 bronze badges

answered Jun 5, 2014 at 15:45

gorpacrate

5,6913 gold badges23 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

chris Frisina Over a year ago

The ng-model='Filter[uT]' is not evaluating to ng-model='Filter[type1]' or ng-model='Filter[type2]' in the DOM. And I get the error: TypeError: Cannot set property 'type1' of undefined when checking a box

gorpacrate Over a year ago

It's evaluating to ng-model="Filter['type1']". It throws an error because Filter ($scope.Filter) is undefined, not because it doesn't evaluate. You've forgotten to write $scope.Filter = {}; in your controller, didn't you? :)

chris Frisina Over a year ago

Yes. Didnt know the diff between an object and an associative array in JS. SO this took some working through. Yay! for working now, NO Yay! for unconventional introduction to CS and programming in one year... Thanks! Ive updated the answer to include $scope.Filter

Collectives™ on Stack Overflow

Dynamically create filter and matching checkboxes in AngularJs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related