I have a code below:
<input type='text' ng-model="search.$">
<li ng-repeat="item in items" |filter:isExpired | filter:search>{{item.name}}</li>
Currently, items has a boolean attribute to indicate whether it is expired or not and the page displays all items that are NOT expired.
On search, I want to show ALL items including expired ones. Is there a way to toggle isExpired filter on search? Or would I need to develop my own custom filter? if so, can anyone give me an idea of an approach?
Any help would be very much appreciated!
You could do the filtering in the controller:
.controller('YourController', function($scope, $filter){
$scope.getItems = function() {
var filtered;
if($scope.search) {
filtered = $filter('filter')($scope.items, $scope.search);
}
else{
filtered = $filter('filter')($scope.items, {isExpired: false});
}
return filtered;
}
});
and then, your ng-repeat would look like this:
<li ng-repeat="item in getItems()">{{item.name}}</li>
Related
I am working on a webpage that would display a list of products with several attributes (color, size, style). I would need that when all checkboxes are unchecked, the page would show all the products, and just when I start checking one the categories will it start filtering the products. Is that possible with checklist-model? Thanks in advance
Yes you can use checklist-model (http://vitalets.github.io/checklist-model/ if you are refreeing this)
Have the code below which will tell you how can you do it just add the filtering logic to it.
Controller code
myApp.controller('MyCtrl', function ($scope) {
//On controller load show all the products
$scope.filters = ['color','style','size'];
$scope.allproducts = [];
$scope.selectedFilters = {
filters: []
};
$scope.applyFilter = function (filters)
{
//Add filtering logic to filter objects from allproducts
//according to filter values in the filters array passed in the function.
//the data will be changed in if filter applied to allproducts array as allproducts in binded in view.
}
$scope.$watchCollection('$scope.selectedFilters.filters', function (newVal, oldVal) {
//If all values are unchecked
if($scope.selectedFilters.filters.length == 0)
{
//Show All products
}
else {
//Show the filtered products
applyFilter($scope.selectedFilters.filters) ;
}
}); });
View code:
<div ng-app="MyApp" ng-controller="MyCtrl">
<label ng-repeat="filter in filters">
<input type="checkbox" checklist-model="selectedFilters.filters" checklist-value="filter"> {{filter}}
</label>
<label ng-repeat="product in allproducts">{{product}}</label>
</div>
I am using ng-repeat with filter and I am trying to store the ng-repeat list .
Here is my code.
<div ng-repeat="itemDate in itemList()|filter:'dispatch'|unique:'date'">
<div>{{(itemDate.dateTimeStamp)}}</div>
<div ng-repeat="item in itemList() |filter:'dispatch'">
<div ng-show="itemDate.date === item.date">
<div>
{{item.desc}}{{item.code}}{{item.price}}
</div>
</div>
</div>
</div>
itemList() i sthe list coming from service.I am trying to store the filterd list in an array. How do I keep the filtered list?
A filter that you are referring to is a view filter for the ng-repeat's rendering loop.
Therefore, the filter is only applied to the data that is being displayed in the DOM. What you are looking to do is update the original data based on the filters provided in your controller, or potentially use that filter as a provider.
controller:
angular.module('myRandomModule')
.controller('SomeControllerWithAFilterInjected', ['$filter', '$scope', SomeControllerWithAFilterInjectedFn]);
function SomeControllerWithAFilterInjectedFn($filter, $scope) {
$scope.arrayOfDataUsedInMyNgRepeat = ['foo', 'bar', 'so', 'many', 'elements'];
$scope.objectWhichHasABunchOfPropsBoundToNgModelsForFilteringThatIsUsedInYourFilter = {};
$scope.filteredArray = function() {
return $filter('nameOfThatFilterIMadeOneDay')($scope.arrayOfDataUsedInMyNgRepeat, $scope.objectWhichHasABunchOfPropsBoundToNgModelsForFilteringThatIsUsedInYourFilter);
}
}
Here is an excellent link to some examples of filters used in controllers.
how can I get a filter with ng-click out of an ul as second filter for an ngtable?
<ul class="artGroups">
<li class="" ng-repeat="artGroup in artGroups">
{{artGroup.artGroupName}}
</li>
</ul>
Here's a plnkr: http://plnkr.co/edit/Amdx2BzEWQWVYmRAgTMw
You can set a function on the main controller to change a value when an artGroup is selected:
$scope.selectedGroup = '';
$scope.setGroup = function(group) {
$scope.selectedGroup = group;
}
And wire up the ng-click directive:
{{artGroup.artGroupName}}
Then you can set up another custom filter on the tr, using that selectedGroup variable on the scope:
<tr ng-repeat="article in articles | filter:searchText | isArtGroup:selectedGroup">
Then create the custom filter to filter the articles based on whether or not they fall into that artGroupId:
app.filter('isArtGroup', function(){
return function(values, groupId) {
if(!groupId) {
// initially don't filter
return values;
}
// filter when we have a selected groupId
return values.filter(function(value){
return value.artGroupId === groupId;
})
}
})
Here's all of that working together in Plunker
Currently I have this in my controller:
$scope.showPostsByTags = function (tag) {
$scope.selectedTag = tag
};
And in my view I have this in my ng-repeat:
ng-repeat="post in postsData| filter: selectedTag"
The "selectedTag" property contains one string only. I am getting my tag from one menu with links:
ng-click="showPostsByTags(tag)"
Which is alright!
I am trying to archieve multiple tags and I want to display the posts not only by one string, but by multiple.
For example my scope property would contain many values pushed in array and $scope.selectedTag would return 'world', 'sports', 'strike'.
Unfortunately I cannot filter my posts by multiple values from array/object
I guess I need something to replace my current "filter: selectedTag" but I cannot figure it out. I found solutions like this but they solve different problems. Can you give me some guidance? Thanks a lot!
Do you mean like this?
http://plnkr.co/edit/6GwqaS7xVLZapeADSRUw?p=preview
app.controller('MainCtrl', function($scope) {
$scope.tags = ['apple', 'orange'];
$scope.selectedFilter = function(val) {
var found = false;
angular.forEach($scope.tags, function(tag) {
if (val.indexOf(tag) !== -1) {
found = true;
}
})
return found;
}
$scope.data = [
'scrambled eggs',
'green eggs and ham',
'apples and oranges',
'apple pie',
'orange juice',
'eggs, oranges, apples'
];
});
Template:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<p>selected: {{tags}}</p>
<p ng-repeat="d in data | filter:selectedFilter">{{d}}</p>
</body>
This will select only the strings appearing in tags. Hooking that in I leave to you.
I've wrote quickly a custom filter for you:
app.filter('multipleTags', function($filter){
return function multipleTags (items, predicates) {
angular.forEach(predicates, function(predicate){
items = $filter('filter')(items, predicate)
//if you want to match exact tag you can use exact match filter
//items = $filter('filter')(items, predicate, true)
})
return items;
}
})
if you go to this working plunk http://plnkr.co/edit/ZhnuM0WW3GZS5QLxK98t?p=preview you will see it in action
if you specify i.e. single letters like b,e it will select only element that contains both,you can obviously make it works with whole words
I need to change a $scope variable inside a filter. The $scope variable is used for a ng-show attribute and the information is only acceded in the filter because I have a ng-repeat with some information and applied by some filters and I need to know when the filters delete all my result to show a message... here is an example: (this is only an idea)
.controller("thing", function() {
$scope.showText = false;
})
.filter("filterText", function() {
return function(information) {
if (information == "") { /* NEED TO CHANGE $scope.showText to true */ }
}
})
HTML:
<div ng-view="showText"> Some Text here </div>
<div ng-repeat="info in information | filterText"></div>
Thanks.
I agree with the comments that you probably don't want to be changing data in the filter in the first place but if you were really hard pressed you might be able to achieve this by just defining a filter function inside your controller (rather than an actual angular "filter") and then just use it as such:
ng-repeat="item in items | filter:myFilter()"
$scope.myFilter = function(item) {
// access to scope here
}
Jeff's code have small error: we need pass only function name to filter as below
ng-repeat="item in items | filter:myFilter"
$scope.myFilter = function(item) {
// access to scope here
}