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
Related
I am facing an issue in using angular filters ....
Parent HTML:
<parent-directive filters="{groupName:'discount'}"></parent-directive>
Directive Contents:
<tr ng-repeat="item in collection | filter : $scope.filters"></tr>
I am filtering with a single object groupName in the collection and it is working correctly. Suppose if i need to filter with multiple objects (i.e) groupName can be discounts or rewards. How can i send it to the directive and filter.
Some HTML:
<li ng-repeat="friend in person.friends | myFilter">
{{ friend }}
</li>
Make custom filter:
app.filter('myFilter', function () {
return function (items) {
var filtered = [];
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item == 'some magic you need to do or compare to') {
filtered.push(item);
}
}
return filtered;
};
});
https://toddmotto.com/everything-about-custom-filters-in-angular-js/
Please help fix the script.
html:
<li ng-repeat="date in dateArr | dateFormatter}">
<span class="date">{{date}}</span>
</li>
js:
angular.module('App', [])
.controller('lsController', function ($scope) {
$scope.dateArr = [
'10.10.2016',
'11.10.2016',
'12.10.2016',
'13.10.2016',
'14.10.2016',
'15.10.2016'
];
/*$scope.dateFormatter = function(date) {
return date.slice(0, 6);
}*/
})
.filter('dateFormatter', function (date) {
return date.slice(0, 6);
});
I use angular 1.4.8
JSFIDDLE
I need use filter, which cut the datestring
Your filter is not constructed properly.
A filter needs to return a function that contains the arguments for the filtering and returns the result
.filter('dateFormatter', function () {
return function(dateString){
return dateString.slice(0, 6);
}
});
Then you have this set to filter in the ng-repeat but putting it there it would need to return a filtered array, not a string input and manipulation. So it needs to be placed where you pass in a string
<li ng-repeat="date in dateArr">
<span class="date">{{date | dateFormatter}}</span>
</li>
DEMO
Your filter is wrong. Check de filter documentation for more details
.filter('dateFormatter', function () {
return function(date){
return date.slice(0, 6)
}
});
Also the way you use your filter is wrong. Take it out of ng-repeat
<span class="date">{{date | dateFormatter }}</span>
FIDDLE
I've got two scope objects
$scope.selectedItems = [1,3]
$scope.items = [{'id':'1','name':'apple'},{'id':'2','name':'banana'},{'id':'3','name':'grapes'}]
In my template I want to use ng-repeat for $scope.selectedItems, but show item names. Is it possible?
Smth. like
<span ng-repeat="selItem in selectedItems track by $index">{{ items.name | items.id == selItem }}</span>
You have few of issues, First is that your ids are string but your stored array of selected items are numbers. My solution tries to accommodate that.
You need to create a third scope property that dynamically calculates the items that have the same id as your selected items ids and returns them.
$scope.selectedItemIds = [1,3]
$scope.items = [{'id':'1','name':'apple'},{'id':'2','name':'banana'},{'id':'3','name':'grapes'}];
$scope.selectedItems = function(){
var _selectedItems = [];
angular.forEach($scope.items, function(item){
if ($scope.selectedItemIds.indexOf(Number(item.id)) != -1){
_selectedItems.push(item);
}
});
return _selectedItems;
};
Now you can use that function in your ng-repeat iterator to access the selected items on the view:
<ul>
<li ng-repeat="item in selectedItems()">{{ item.name }}</li>
</ul>
Here is a working fiddle
You can try it by custom filter:
In controller:
$scope.selectedItems = ['1','3'];
$scope.items = [{'id':'1','name':'apple'},{'id':'2','name':'banana'}, {'id':'3','name':'grapes'}];
$scope.getselectedItem= function(item) {
if($scope.selectedItems.indexOf(item.id)!==-1) {
return item;
}
else {
return null;
}
};
In Html:
<p ng-repeat="item in items | filter: getselectedItem">{{item.name}}</p>
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>
I need to filter items in ng-repeat so that only the items which not appear in alreadyAddedValues() array will be shown:
<ul class="dropdown-menu">
<li ng-repeat="v in values() | filter: { ????? } ">{{value.name}}</li>
</ul>
$scope.values() = function(){
................
}
$scope.alreadyAddedValues() = function()
{
//returns an array
}
The search of an already added value should perform by value.shortName
You can, for example, use a custom function to do the filtering:
<li ng-repeat="v in values() | filter:filterAlreadyAdded ">{{value.name}}</li>
On the controller:
$scope.filterAlreadyAdded = function(item) {
// filter logic here...
// return false if item already added, true otherwise
};
jsfiddle: http://jsfiddle.net/bmleite/5VbCJ/