2

I have a dynamic navigation menu that corresponds to various filters that are passed into the creation of a table, filtering the content in the table depending on which button is pressed.

I have a variable in the $scope named $scope.uniqueFilter. The filter selected depends on the button pressed. On the ng-click of a link, I have a function defined that takes the input of a parameter of the button, passes it into this function, which then sets $scope.uniqueFilter to equal the button's specific filtering method.

Onclick, I've been able to pass the desired filters as expected, but they are not only not applying to the content, but they completely stop the table from being created at all.

The content of the row I'm trying to repeat looks like this:

<tr class="progress" ng-repeat="idea in ideas | filter:uniqueFilter" >

The buttons changing the uniqueFilter are set up like this:

<div class="nav">
    <div ng-controller="NavController">
      <p ng-repeat="link in links">
        <block class="button" href="{{link.URL}}" title="{{link.name}}">
          <a href="{{link.URL}}" ng-click="getFilter(link.show)">
            {{link.name}}
          </a>
        </block>
      </p>
  </div>
</div>

This is the contents of NavController:

app.controller('NavController', ['$scope', 'DataFactory', function($scope, DataFactory){


$scope.links = [
    {'name':'About', //title that will be displayed on the link
    'URL': '#/about', //URL/view that the link will lead to/show
    'show':'(not actually a filter here)' //view may simply change so some info is hidden or revealed
    },
    {'name':'Active',
    'URL': '#/active',
    'show':'active'  //I want all things with active:true
    },
    {'name':'Complete',
    'URL': '#/active', //this is supposed to go to #/active, not a bug
    'show':'!active' //I want all things with active:false
    }
];

$scope.ideas = DataFactory;


$scope.uniqueFilter=''; //variable to allow access to individual filters based on which button is clicked
$scope.getFilter = function(theFilter){ //called onclick for each button and passes in the link.show that each button has, defining the filter to use
    $scope.uniqueFilter = theFilter;  //sets the variable to match desired filter
    alert("I just set the filter to "+$scope.uniqueFilter);
};
}]);

DataFactory, what populates the table:

app.factory('DataFactory', function(){
    return [
        {'title':'Title1',
        'A': '80',
        'B': '6',
        'active': true //this is what should determine if it shows or not
        },
       {'title':'Title2',
        'A': '80',
        'B': '6',
        'active': true
        },
        {'title':'Title3',
        'A': '80',
        'B': '6',
        'active': false
        },
    ];
});

I feel like I'm missing something obvious but I guess I'm not thorough enough with Angular to be able to find it. Thanks for any help you can give!

Edit

So I put in some suggested updates.

Here is a better view of my ng-repeat tag:

<table>
    <tr class="title_bar">
        <td>Title</td>
        <td>A</td>
        <td>B</td>
    </tr>

    <tr class="progress" ng-repeat="idea in ideas | filter:uniqueFilter">
<!-- uniqueFilter here does nothing, and {value:true} stops values from appearing,
 but {active:true}(and false) works. But I need this filter to change based on what
 is clicked, hence why I want uniqueFilter to work -->
        <td>{{idea.title}}</td>
        <td>{{idea.A}}</td>
        <td>{{idea.B}}</td>
    </tr>
</table>

And here is what I've changed my NavController link array to:

$scope.links = [
    {'name':'About', //title that will be displayed on the link
    'URL': '#/about', //URL/view that the link will lead to/show
    'show':'(not actually a filter here)' //view may simply change so some info is hidden or revealed
    },
    {'name':'Active',
    'URL': '#/active',
    'show': {'active': true}  //unsure if this needs to be 'active' or active without quotes; in the DataFactory, it's in quotes
    },
    {'name':'Complete',
    'URL': '#/active',
    'show':{'active': false}
    }
];

1 Answer 1

1

You are close. You didn't show your ng-repeat but basically you just want to make sure you set up your verbiage for the uniqueFilter correctly...

{   'name':'Active',
    'URL': '#/active',
    'show': { active:true } // <-- this is what you'd pass to your "filter:" expression
},
{   'name':'Complete',
    'URL': '#/active', 
    'show': { active:false } // <-- this is what you'd pass to your "filter:" expression
}

So basically your ng-repeat would look (sort of like) which passes in exactly what filter needs to work with boolean values.

<li ng-repeat="item in items | filter: uniqueFilter">

// which for example would translate into:
<li ng-repeat="item in items | filter:{value:true}"> // or
<li ng-repeat="item in items | filter:{value:false}"> 
// allowing it to work with boolean values
Sign up to request clarification or add additional context in comments.

4 Comments

The uniqueFilter variable doesn't seem to be working. I've been able to get the filters working with {active:true} and {active:false} hard-coded, (so now I know the rest of my code is bug-free in relation to that), but the uniqueFilter isn't impacting the table. I just updated the code in the question to show you my latest edits. Any ideas?
You can do it with/without quotes, both works. Looks at this example: I'm doing basically the same thing you are here, there must be some minute difference that's causing it not to work for you. Here I'm looping through filters & then setting the new filter on click. jsfiddle.net/ExpertSystem/CyDbB
I'm testing it in Plunker (since $routeProvider requires AJAX requests and I can't test it locally), and for some reason your exact code is working on JSFiddle and not Plunker. I modified it to exactly match what I have, and it works! But not in Plunker. Guess it's a Plunker issue and not an Angular issue on my end. What a dumb thing to bug up my app... thanks for your help!! I'm glad you were able to help me get it working.
Hey perfect! Glad to help. Boolean filters bothered me for a while until I realized how to do them as well! Luckily you'll never run into this issue again now :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.