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>
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'm having a problem with setting checked on selected value using Icon collection-repeat with ion-radio.
Using the collection-repeat, if the selected item is the first item in the list, setting checked wouldn't work. To make it works I found, I need to make a delay assigning list data.
(If using ng-repeat, it works. But the list could be long, so I need to use the collection-repeat)
Example,
Template)
<ion-content class="has-header" ng-controller="Ctrl">
<div class="list">
<ion-radio
collection-repeat="item in list"
ng-model="selectedItem"
ng-value="item.id">
{{ item.n }}
</ion-radio>
</div>
</ion-content>
Controller)
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
})
.controller('Ctrl',function($scope, $timeout) {
$scope.selectedItem = 1; // the first item
var list = [];
for (index = 1; index < 3; ++index) {
list.push({id: index, n: 'Item n. ' + index});
}
$scope.list = list;
});
The first item of the list wouldn't be checked. To make it works,
replace
$scope.list = list;
with
$timeout(function() {
$scope.list = list;
}, 500);
I want to know why it happened, and I don't think the 500ms is guaranteed, so I need to know right way to solve this. Please advice me.
It makes complete sense that you want to use collection-repeat over ng-repeat since the list could potentially be very long, and would be unnecessary to render all the items in the DOM at once using ng-repeat. Unfortunately this is a known bug within Ionic from what I have read and the work around to this is quite hacky. For instance the code below works with making active the 2nd radio:
Controller
.controller('Ctrl',function($scope, $timeout) {
$scope.data = {
selectedItem: 2
};
var list = [];
for (index = 1; index < 3; ++index) {
list.push({id: index, n: 'Item n. ' + index});
}
$scope.list = list;
});
HTML
<ion-content class="has-header" ng-controller="Ctrl">
<div class="list">
<ion-radio collection-repeat="item in list" ng-model="data.selectedItem" ng-value="item.id">
{{ item.n }}
</ion-radio>
</div>
</ion-content>
But when you change the selected item to 1, it does not show. Below is a workaround for what you are looking for. Start your loop at 0 and then hide that item using CSS (like I said "hacky"), give it a try.
Controller
.controller('Ctrl',function($scope, $timeout) {
$scope.data = {
selectedItem: 1
};
var list = [];
for (index = 0; index < 5; ++index) {
list.push({id: index, n: 'Item n. ' + index});
}
$scope.list = list;
});
HTML
<ion-content class="has-header" ng-controller="Ctrl">
<div class="list">
<ion-radio
collection-repeat="item in list" ng-model="data.selectedItem" ng-value="item.id" item-height="54" item-width="100.5%">
{{ item.n }}
</ion-radio>
CSS
.item-radio:first-of-type {
display: none;
}
.item-radio {
margin-top: -54px !important;
}
Hope this helps.
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 would like to use my custom filter with ngRepeat directive. Here is what I have
HTML:
<div ng-app="menuApp">
<ul ng-controller="MenuCtrl">
<li ng-repeat="item in menuItems | rootCategories">
{{item.Name}}
</li>
</ul>
</div>
JS:
angular.module('menuApp', [])
.filter('rootCategories', function() {
return function(item) {
return item.Parent == 0;
};
});
function MenuCtrl($scope) {
$scope.menuItems = [{ "Id": 1, "Name": "Sweep", "Parent": 0 }];
/*
$scope.rootCategories = function(item) {
return item.Parent == 0;
};
*/
};
I do not want to use the commented out way to filter my items, because the real filter will be complicated than in the provided example. For some reasons input parameter "item" is not defined, therefore I see nothing. Could you tell me what is wrong? Thank you.
Please have a look at this fiddle. http://jsfiddle.net/bKFXy/.
This uses the syntax of passing a predicate object as the filter expression.
item in menuItems | filter:{Parent:0}
There is another method for filtering and the fiddle for that is here http://jsfiddle.net/kd5dv/