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?
