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}
}
];