I have a JSON filter in view
<div ng-repeat="(key, value) in TData.Files
| map: toLocaleDate
| groupBy: 'da'">
<div><strong>{ Date:</strong> "{{ key }}" , Count: {{value.length}} } ,</div>
using a filter in controller
$scope.toLocaleDate = function (e) {
var date = e.da.split(" ");
e.da = date[0];
return e;
};
Now i Want to Have the Filtered Data into Another JSON Object. So i need to do th e filter in controller rather than in View .. How to implement that?
The expected result is like
[{'Date':"2012-01-12", Count:5},{'Date':"2012-01-13", Count:8}, ....]
As there is no default filter groupBy in angularjs So You have to make a filter for that
and you can use any filter in the controller just explained as
Inject the $filter dependency and in controller just use the simple syntax
$filter('filtername')('arraydata', 'other arguments');
http://jsfiddle.net/R8YZh/35/
If you need that in js code. You can use an injected method of angular-filter lib. The Filter "group by" is a part of this library. Use it like this.
function controller($scope, $http, groupByFilter) {
var groupedData = groupByFilter(originalArray, 'groupPropName');
}
https://github.com/a8m/angular-filter/wiki/Common-Questions#inject-filters
Related
If I have a filter defined
app.filter('filterName', function() {
return function(var) {
// Some filter stuff
}
}
I can invoke it on controller doing $filter('filterName')($scope.someObj);.
But, here is my question, if I have a function that use as a filter
$scope.myFilterFunction = function() {
return true;
}
In my HTML
<p ng-repeat="item in items | filter:myFilterFunction">{{item}}</p>
How can I use this function filter in the controller (I have tested with $filter but throws an error).
Thanks in advance.
If you already implement the custom filter filterName, why not use it?
Try
<p ng-repeat="item in items | filterName">{{item}}</p>
Updated
You just missing the parentheses.
<p ng-repeat="item in items | filter:myFilterFunction()">{{item}}</p>
Inject $filter in the controller and use it with your filter name.
controller.$inject = ['$filter'];
function controller($filter){
// code here
$filter('filterName')(arg1,arg2);
//
}
I tried hard and visit lot of similar question like this but still unable to solve this issue.
I want to pass extra parameter in angular filter function. I found solution as below but it's not working. I am getting undefined for object which I have used in ng-repeat.
<li ng-repeat="user in users | filter:isStatus(user,secondParam)">{{user.name}}</li>
There are solution for angular custom filter as below but that also not working with angular filter function.
<li ng-repeat="user in users | filter:isStatus:user:secondParam">{{user.name}}</li>
jsFiddle - You can see my problem here.
Will try:
$scope.isStatus = function(secondParam, thirdParam){
return function(user) {
console.log(secondParam);
console.log(thirdParam);
return user.status == $scope.status;
}
Updated version http://jsfiddle.net/4PYZa/282/
According to your case, you can use predicate expression instead of custom filter:
<li ng-repeat="user in users | filter:{status: status, name: name}">{{user.name}}</li>
Take a look at this fiddle: http://jsfiddle.net/ovym2tpr/28/
You can use custom filter in anyway, it just performs not very well especially under nested ng-repeat
How do I call an Angular.js filter with multiple arguments?
AngularJS : Custom filters and ng-repeat
myApp.filter("isStatus ", function() { // register new filter
return function(user, secondParam, thirdParam) { // filter arguments
return user.status == $scope.status; // implementation
};
});
Calling from Template
<li ng-repeat="user in users | isStatus:secondParam">{{user.name}}</li>
It's very simple , just do this
<li ng-repeat="user in users | filter:user | filter : secondParam)">{{user.name}}</li>
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
}
This sounds simple, but googling is coming up trumps. I have a dropdown select that has multiple categories:
<select ng-model="orderProp" >
<option ng-repeat="cats in categories" value="{{cats}}">{{cats}}</option>
</select>
I also have a map, using Angular Google Maps, which uses JSON data to plot markers. The data for these markers is called $scope.markersProperty
When a users uses the select box, I'd like to dynamically change the value of markersProperty. Using Angular's HTML {{}} I can get the results I want with a simple:
{{markersProperty|filter:orderProp}}
But I can't for the life of me work out how to get similar functionality to update the array $scope.markersProperty. Any ideas?
If you mean you want to update the scope variable, then you can use the $filter service:
.controller('MainCtrl', function ( $scope, $filter ) {
$scope.markersProperty = // ...
$scope.$watch( 'orderProp', function ( val ) {
$scope.filteredMarkersProperty = $filter('filter')($scope.markersProperty, val);
});
});
I'm using AngularJS and it's great.
I can't find it in the Documentation - What is the equivalent in Javascript to this AngularJS expression:
<div>{{ (myList| filter:mySearch).length }}</div>
Thanks for the help.
It's on Angular's filter documentation:
In HTML Template Binding
{{ filter_expression | filter:expression }}
In JavaScript
$filter('filter')(array, expression)
In your case, it would look something like $filter('filter')(myList, mySearch).
As an alternative syntax you can also inject a filter directly, without going through the $filter service. For example to inject filter filter to your controller you could write:
MyCtrl = function($scope, filterFilter) {
$scope.filtered = filterFilter(myArray, expression);
}
A question very similar to How to use a filter in a controller?
In your html
<input ng-model="search">
<div ng-repeat="thing in things | filter:searchResults"></div>
In your JS
$scope.$watch('search', function (newValue, oldValue) {
var searchResults = filterFilter($scope.things, $scope.search);
});