I'm trying to use Angular filter to display only sorted tags by category

Example of a tag object in tags array:

{
    term: term,
    id: id,
    category: category
}

The ng-repeat tags:

<li ng-repeat="(k, m) in tags | filter: filterTags | orderBy:predicate:reverse"
    ng-class="{'selected': m.selected}"
    ng-click="selectTag(m)">    
    <div class="tag">{{m.term}}</div>
</li>

The sort by category radio buttons:

<div class="category-selection">
    <ul>
        <li>
            <input type="radio" ng-model="catSort" name="brand" value="brand">
            Brand
        </li>
        <li>
            <input type="radio" ng-model="catSort" name="client" value="client">
            Client
       </li>

In the sort radio button directive controller:

// Detect category sort
// Then apply the value to the filter function:

$scope.$watch('catSort', function(value) {
    console.log(value);
    tagsPanel = ScopeFactory.getScope('tagsPanel');
    tagsPanel.filterTags(value);
}); 

I found out that filter is has it's own Angular module, so my question is, how do I get the category strings into this filter?

.filter('filterTags', function() {
    return function(tags, category) {
        return tags;
    };
});

Here is where I capture the new category, how would I send the value into the filter above?

$scope.$watch('catSort', function(value) {
    console.log(value);
}); 

I'm trying to use Angular filter to display only sorted tags by category

Example of a tag object in tags array:

{
    term: term,
    id: id,
    category: category
}

The ng-repeat tags:

<li ng-repeat="(k, m) in tags | filter: filterTags | orderBy:predicate:reverse"
    ng-class="{'selected': m.selected}"
    ng-click="selectTag(m)">    
    <div class="tag">{{m.term}}</div>
</li>

The sort by category radio buttons:

<div class="category-selection">
    <ul>
        <li>
            <input type="radio" ng-model="catSort" name="brand" value="brand">
            Brand
        </li>
        <li>
            <input type="radio" ng-model="catSort" name="client" value="client">
            Client
       </li>

In the sort radio button directive controller:

// Detect category sort
// Then apply the value to the filter function:

$scope.$watch('catSort', function(value) {
    console.log(value);
    tagsPanel = ScopeFactory.getScope('tagsPanel');
    tagsPanel.filterTags(value);
}); 

I found out that filter is has it's own Angular module, so my question is, how do I get the category strings into this filter?

.filter('filterTags', function() {
    return function(tags, category) {
        return tags;
    };
});

Here is where I capture the new category, how would I send the value into the filter above?

$scope.$watch('catSort', function(value) {
    console.log(value);
}); 

• javascript
• angularjs
• angularjs-directive
• angularjs-ng-repeat
• angularjs-filter

• judging by (k,v) syntax in ng-repeat looks like iterating an object. Can't filter an object as well as objects in javascript aren't sortable. So much easier using arrays of objects – charlietfl Commented May 7, 2015 at 21:05
• well is it an object? if so you can't use filter. Filter expects array input unless you are using it on a string – charlietfl Commented May 7, 2015 at 21:08
• So you can't filter something that has a key value pair? Like tag.category? That sucks, hmm ok I'm thinking of a much more involved solution for this problem. Do you want to post the answer? – Leon Gaban Commented May 7, 2015 at 21:13
• is that tag object in an array? If it is...you can sort or filter the array by tag.category...if the parent is itself an object no you can't – charlietfl Commented May 7, 2015 at 21:18
• Yes the parent is an Array! :D tags[] is an array which contains objects – Leon Gaban Commented May 7, 2015 at 21:20

1 Answer 1

If I got it right. You want to filter your tag object array by category.

You can call a scope method and return true if it matches the currently selected category. The parameter for this method will be a tag object of your ng-repeat. So you can do a check like return tag.category == $scope.catSort;

Please have a look at the demo below and here at jsFiddle.

(I've took sport categories just to have some dummy data.)

angular.module('myApp', [])
    .controller('mainCtrl', function ($scope) {
    $scope.catSort = "football";
    $scope.tags = [{
        term: 'foot1',
        id: 'id',
        category: 'football'
    }, {
        term: 'foot2',
        id: 'id2',
        category: 'football'
    }, {
        term: 'base1',
        id: 'id',
        category: 'baseball'
    }, {
        term: 'base2',
        id: 'id2',
        category: 'baseball'
    }, ];

    $scope.filterTags = function (tag) {
        //console.log(tag, $scope.catSort);
        return tag.category == $scope.catSort;
    };
});

ul {
    list-style-type: none;
}

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">Filter by category:
    <div class="category-selection">
        <ul>
            <li>
                <input type="radio" ng-model="catSort" name="football" value="football" />Football</li>
            <li>
                <input type="radio" ng-model="catSort" name="baseball" value="baseball" />Baseball</li>
        </ul>
    </div>Teams:
    <ul>
        <li ng-repeat="(index, tag) in tags | filter: filterTags" ng-class="{'selected': tag.selected}" ng-click="selectTag(tag)">
            <div class="tag">{{tag.term}}</div>
        </li>
    </ul>
</div>