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>
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/
I'm currently developing an AngularJS web application.
What I'm trying to achieve:
List each item using the ng-repeat method and remove any null values.
Correct - One, Two, Three, Four
Incorrect - One, Two, Three, Four, Null (empty ng-repeat item)
Current Problems:
I've tried several methods todo this, including using the ng-hide function and creating a array filter but I can't seem to get either working correctly.
Any help / advice would be helpful!
Array
[ "One", "Two", "Three", "Four", null ]
HTML:
<md-list>
<md-list-item class="md-3-line" ng-repeat="item in parseQ4P2 track by $index">
<div class="md-list-item-text">
<p>{{item}}</p>
</div>
<md-divider ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
Failed Filter:
dashApp.filter('removeBlackItems', function() {
return function(inputArray) {
var outArray = [];
for (var i = 0; i < inputArray.length; i++) {
if(inputArray[i].length !== 0){
outArray.push(inputArray[i]);
}
}
return outArray;
};
});
You can filter data inside ng-repeat.
Try something like this: http://jsbin.com/sufexe/edit?html,js,output
HTML:
.filter('emptyFilter', function() {
return function(array) {
var filteredArray = [];
angular.forEach(array, function(item) {
if (item) filteredArray.push(item);
});
return filteredArray;
};
}
Controller JS:
.filter('emptyFilter', function() {
return function(array) {
var filteredArray = [];
angular.forEach(array, function(item) {
if (item) filteredArray.push(item);
});
return filteredArray;
};
}
Anwser URL - AngularJS remove empty value
as seen in ng-repeat filter null value not displaying there's no need for a custom filter. Ese angular's existing filter functionality to remove null objects from array in the template/view
<ul ng-repeat="item in items| filter:{item:'!'} track by $index">
<li>{{item.name}}</li>
</ul>
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
I have an array of items I am displaying with
<tr ng-repeat="i in items | filter:search_text" ...>
the items have a check box that denotes "selected" or not.
how can I know which items are displayed by the filter when I need to do something like call a delete function that will delete all selected items ?
Items which have been selected (checked in the checkbox) and then hidden by filtering are still selected. I need a way to know which item is on screen at the moment.
You can use $filter to call a filter in your controller.
app.controller('MyCtrl', function($scope, $filter){
var filter = $filter('filter');
$scope.items = [/* your items here */]
$scope.selectAllFilteredItems = function (){
var filtered = filter($scope.items, $scope.search_text);
angular.forEach(filtered, function(item) {
item.selected = true;
});
};
});
You would then call selectAllFilteredItems() in an ng-click or anywhere else you needed to.
Not really super polished, but it works.
In your controller
var filter = $filter('filter');
$scope.item_ids = [];
$scope.selectAllFilteredItems = function (){
var filtered = filter($scope.items, $scope.searchText);
angular.forEach(filtered, function(item, key) {
if($scope.item_ids.indexOf(item.id) == -1){
$scope.item_ids.push(item.id);
$scope.items[key].selected = true;
}else{
$scope.item_ids.splice($scope.item_ids.indexOf(item.id),1);
$scope.items[key].selected = false;
}
});
};
Then in the table you have a checkbox to select all or unselect all.
<table class='table table-striped'>
<tr>
<th><input type="checkbox" ng-click="selectAllFilteredItems()"></th>
</tr>
<tr ng-repeat="item in items | filter:searchText">
<td><input type="checkbox" ng-model="item.selected"></td>
</tr>
</table>
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/