a8m / angular-filter Goto Github PK
View Code? Open in Web Editor NEWBunch of useful filters for AngularJS (with no external dependencies!)
Home Page: https://github.com/a8m/angular-filter
License: MIT License
Bunch of useful filters for AngularJS (with no external dependencies!)
Home Page: https://github.com/a8m/angular-filter
License: MIT License
Angular filter is a too common name, easily mistaken with angular filters feature.
I suggest a cooler name, something of the sort of Bower, Mimosa, Boba or Grunt.
It needs to be something related to filters. What about "ngPipes"? Since filters are using pipes ( | ) this could be a cool name no?
eg:
{{ title | truncate: 27: '...' }}
if title has few characters(eg:abcdef) then show full word
currently it shown 'abc...'
But I want only add '...' for text has more characters than 27
How can I make condition with UNIQUE filter
if UNIQUE remove same object
$scope.param=1
else(if UNIQUE not remove objects)
$scope.param=2
Given an array, returns the mean.
Shouldn't this return false ? contains.js#L22
{{ ['foo', 'bar'] | contains: undefined }} => true
I've a problem where each player can be in multiple teams.
Example, I want Gene to be in both alpha and beta teams, like this:
It is possible? How?
Thanks
Both groupBy and countBy show text directly in <ul>
s, which is non-standard HTML.
According to the w3, ul's and ol's can only contain:
Zero or more li and script-supporting elements.
It's not a big deal, but I bet some people will copy/paste without thinking much about it.
I think it is better to keep return types consistent to avoid unexpected behavior, such as use of a filter inside ng-repeat, which causes ng-repeat to iterate over object properties instead of the object itself.
Replace "return (count < 2) ? result[0] : result;" with just "return result;" inside "getFirstMatches" function.
shortFmt doesn't seem to like floats much, would it be worth casting them to an int inside the filter? I'm currently doing outside.
Just generated this:
http://mallowigi.github.io/angular-filter/
If you want to give a better name, create an organization first, like a8m or I dunno what.
A Sum filter would be a nice addition. I think it can be used when building tables for example.
1 Take an array as first argument.
2 If the members are Ints, sum them and return the sum.
3 If the members are Strings, parse and them sum them and return the sum.
4 If the members are objects, take a second argument that will be the path inside the object to the required param, and then perform steps 2 or 3 on the primitive values.
When collection is undefined on where filter, we got:
"TypeError: Cannot read property 'filter' of undefined"
A simple check solve the problem.
if(!collection)) { return false; }
Hi,
I'm a beginner in AngularJS, so I guess it's a beginner mistake, but I can't include angular-filter.
I used bower to download angular-filter. Here is my code, I think I did everything right, but obviously something is wrong...
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/app.css"/>
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular-filter/dist/angular-filter.min.js"></script>
</head>
<body ng-app="loApp" ng-controller="AppCtrl">
<!-- ... -->
<script>
var loApp = angular.module('loApp', [angular.filter]).
controller('AppCtrl', function($scope){
$scope.isDrawerDeployed = false;
});
</script>
</body>
</html>
I get this error in the Chrome console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.8/$injector/modulerr?p0=loApp&p1=Error%3A%2…alhost%3A8888%2FHelloAngular%2Fjs%2Flib%2Fangular%2Fangular.min.js%3A17%3A350)
Thanks for the ones who will help me ! ;)
I am unable to apply a "where" filter over an object trying to match a property whose value is false. The example below should illustrate my scenario. On the excerp below, ng-repeat will not be repeated:
<div ng-repeat="item in [{prop:false}, {prop:true}] | where: {prop: false}">
item: {{ item.prop }}
</div>
Now, with this new filter spec, the repetition will occur as expected:
<div ng-repeat="item in [{prop:false}, {prop:true}] | where: {prop: true}">
item: {{ item.prop }}
</div>
The 3rd instruction under Get Started is
(3) Add 'angular.filter' to your main module's list of dependencies.
But this results in an injection error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to instantiate module angular-filter due to: Error: [$injector:nomod] Module 'angular-filter' is not available!
I can see there is no module called 'angular-filter'
in the source code, but a bunch of 'a8m.*'
modules. Is the idea that we inject all these?
Hi,
I was thinking of adding passwordFmt which checks whether a string contains 8+ characters, at least one uppercase, lowercase, and a number. There may be a 'strict' option where it also checks for at least one special character.
Let me know what you guys think of this.
Taku
In order to allow dynamic changes of searchField parameters, wouldn't it be better to pass them in an array like filterBy does? (searchField: [prop, nested.prop, etc..], instead of searchField: prop: nested.prop: etc..)
The old notation could be kept just for backward compatibilty...
Thank you in advance!
The current behavior of ucfirst is acting werid.
its uppercasing all of the words in the sentence.
I think it should behave like in PHP, that its uppercasing only the first word.
if you want to uppercase all of the words you can create a ucwords filter.
anyway I've forked the project and made the changes.
ucfirst - will uppercase only the first letter in the first word
ucwords - will behave like ucfirst used to. it will uppercase the first letter in all of the words.
also i've added
lcfirst, lcwords, and nl2br which was needed in my project.
PHP Resources:
http://php.net/manual/en/function.ucfirst.php
http://php.net/manual/en/function.ucwords.php
The mode is the number that is repeated more often than any other.
I'm looking for a string filter that replaces a null
or empty string with a desired input. For example:
<p>{{ "" | replaceIfBlank:"N/A" }}</p>
<!--result: <p>N/A</p>-->
<h2>{{ null | replaceIfBlank:"Title not given" }}</h2>
<!--result: <n2>Title not given</h2>-->
Happy to build this myself and contribute via a PR, if it sounds useful and isn't already included here or in the native Angular filters (but just being overlooked by me).
Have you considered adding a chain function similar to Underscore's http://underscorejs.org/#chain?
This would be useful for chaining filters within the controller. Thanks.
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: function () {\n var start = performance.now();\n var ret = w.apply(this, arguments);\n var end = performance.now();\n debug.watchPerf[watchStr].time += (end - start);\n debug.watchPerf[watchStr].calls += 1;\n return ret;\n }; newVal: 983; oldVal: 981"],["fn: function () {\n var start = performance.now();\n var ret = w.apply(this, arguments);\n var end = performance.now();\n debug.watchPerf[watchStr].time += (end - start);\n debug.watchPerf[watchStr].calls += 1;\n return ret;\n }; newVal: 985; oldVal: 983"],["fn: function () {\n var start = performance.now();\n var ret = w.apply(this, arguments);\n var end = performance.now();\n debug.watchPerf[watchStr].time += (end - start);\n debug.watchPerf[watchStr].calls += 1;\n return ret;\n }; newVal: 987; oldVal: 985"],["fn: function () {\n var start = performance.now();\n var ret = w.apply(this, arguments);\n var end = performance.now();\n debug.watchPerf[watchStr].time += (end - start);\n debug.watchPerf[watchStr].calls += 1;\n return ret;\n }; newVal: 989; oldVal: 987"],["fn: function () {\n var start = performance.now();\n var ret = w.apply(this, arguments);\n var end = performance.now();\n debug.watchPerf[watchStr].time += (end - start);\n debug.watchPerf[watchStr].calls += 1;\n return ret;\n }; newVal: 991; oldVal: 989"]]
projects is set to: [ { "id": "537650f3b77efe23a47914f4", "organization_id": "537650f3b77efe23a47914f3", "organization_name": "Acme", "name": "Disintegrating Pistol", "data": {}, "promoted_tabs": [], "custom_content": null, "stack_count": 0, "event_count": 0, "total_event_count": 306, "last_event_date": "2014-11-11T13:56:48.275Z" }, { "id": "54416dbba397230ba82dd311", "organization_id": "54416dbba397230ba82dd30d", "organization_name": "Test", "name": "Test Project", "data": {}, "promoted_tabs": [], "custom_content": null, "stack_count": 0, "event_count": 0, "total_event_count": 0, "last_event_date": "0001-01-01T00:00:00" } ]
I'm also using the latest stable version of angular 1.3.
It is possible to revers sort groups and elements when using 'groupBy' ?
I tried
but this doesn't work.
I'm using contains directive with input from inputbox:
<input type="text" ng-model="search"/>
<div ng-show="{{ tags | contains: search }}">
Directive ng-show doesn't refresh on search input changes.
Can you update cdnjs's version? :)
Hi,
I could not find the standard package anywhere - would like to use it with ASP.NET.
Could you please release?
https://www.nuget.org/packages?q=angular-filter
Thanks!
defaultsFilter
allows to specify a default fallback value for properties that resolve to undefined.
Example:
$scope.orders = [
{ id:1, destination: { zip: 21908 }, name: 'Ariel M' },
{ id:2, name: 'John F' },
{ id:3, destination: { zip: 45841 } },
{ id:4, destination: { zip: 78612 }, name: 'Danno L' },
];
$scope.defaultValue = {
name: 'Customer name not available',
destination: { zip: 'Pickup' }
};
<li ng-repeat="order in orders | defaults: defaultValue">
<b>id:</b> {{ order.id }},
<b>name:</b> {{ order.name }},
<b>shipping address:</b> {{ order.destination.zip }}
</li>
Results:
On this line: https://github.com/a8m/angular-filter/blob/master/src/_filter/collection/filter-by.js#L45
you have ! indexOf which will only return truthy if indexOf returns 0, meaning it's the start of the search.
If your tests use 'ar' instead of 'bar' they would fail.
When you make a groupBy, filterBy is not working
For example:
[
{
category: 'alpha',
id: 3,
group: 'a'
},{
category: 'beta',
id: 2,
group: 'a'
}, {
category: 'gamma',
id: 1,
group: 'b'
}
]
if you make
ng-repeat="(i, category) in array | orderBy: 'id' | groupBy: 'group' "
{{ i }}
ng-repeta="item in category"
{{ item.category }}
It's render:
a
alpha
beta
b
gamma
instead of
b
gamma
a
beta
alpha
How can I call a filter in another one? I'm trying to do something like this but it doesn't work:
angular.module('a8m.math.mean', ['a8m.math.sum'])
.filter('mean', ['$math', '$parse', function ($math, $parse) {
return function (input) {
if(!isArray(input)) {
return input;
}
return $math.sum(input) / input.length;
};
}]);
Add aliases filters for this set of filters #22
For example:
<p>{{ num | isGreaterThan: 100 }}</p>
could use as:
<p>{{ num | >: 100 }}</p>
or
<p>{{ num | isLessThanOrEqualTo: 100 }}</p>
could use as:
<p>{{ num | <=: 100 }}</p>
Another filter I found useful is the zero padding. Would you mind to add it in the library also? Thanks.
String.prototype.repeat = function( num ) {
return new Array( num + 1 ).join( this );
}
app.filter('zeroPadding', function () {
return function(input, n) {
if(input === undefined)
input = "";
if(input.length >= n)
return input;
var zeros = "0".repeat(n);
return (zeros + input).slice(-1 * n);
};
});
Here is a reference:
https://gist.github.com/njouanin/3348ed708d527de8641c
Hi guys,
I can't get OrderBy to work with GroupBy.
ng-repeat="(key, value) in memories | groupBy: 'groupDate' | orderBy : '-groupDate'
orderBy does not work.
groupDate is a normal date (2014/11/29)
I also tried using value.data.groupDate[0]; Not working too.
Nothing seems to change the order.
Could you please advice?
Thanks and best regards,
Jakub
I'm trying to use the reverse filter on a set of complex objects which can't be serialised to JSON due to cyclic structures (although I'm not sure if this has any link to the problem I'm having).
Currently I'm using:
ng-repeat="response in collection.data.slice().reverse() track by response.element.id"
To reverse the array. The "track by" avoids infinite digest loops. If I change the code to use your reverse filter:
ng-repeat="response in collection.data | reverse track by response.element.id"
I begin to get infinite digest errors. The problem I think stems from reversing the array in place which confuses Angular's dirty tracking.
Any thoughts? I'm not quite where the problem lies with the implementation. My instinct is that a new array containing references to the objects should be returned from the filters.
I have a question regarding the usage of angular-filter.
Let's imagine I have an array of objects that have arrays inside, eg:
[{id: 1, props: [{id: 11, name: "A", property: true}, {id: 12, name: "Z", property: false}]},
{id: 2, props: [{id: 21, name: "B", property: true}, {id: 22, name: "Y", property: true}]},
{id: 3, props: [{id: 31, name: "C", property: false}, {id: 32, name: "X", property: true}]}]
The intention is to count the number of properties that are true: the number should be 4.
I'm having a bit of trouble reaching that number...
Is it possible to combine filterBy and contains? Where contains should be executed if filterBy does not return results
Given this data:
$scope.types = [
{
"name": "type1",
"default": false
},
{
"name": "type2",
"default": true
}
];
This failed:
<div type="{{ (types | first: 'default === true').name }}"></div>
I had to revert to:
<div type="{{ ((types | where: {default:true}) | first).name }}"></div>
As a test I also did:
<div type="{{ (types | first: 1).name }}"></div>
but didn't seem to work either
This was working on 0.4.5 but not in 0.5.2
What is the syntax to use the 'filterBy' filter in JS code?
HTML Mouse events don't work as expected when bound to elements using ng-repeat with filters.
On a MacOSX 10.10 MacbookPro:
Example: http://jsfiddle.net/pfk1v3z9/
Is there any way to avoid this?
I already tried to apply mouse events to an inner div hoping to not trigger the filter on every event with no luck.
ATM I work-arounded the problem grouping on the controller with a $watch on my original collection.
Could you consider including a 'with' filter as in this solution: http://stackoverflow.com/questions/14788652/how-to-filter-key-value-with-ng-repeat-in-angularjs?
I use nested objects alot and this would be helpful. Thanks.
Hi,
it would be nice if filterBy accepted a comparator like angular's filterFilter (see docs at https://docs.angularjs.org/api/ng/filter/filter). Especially being able to pass "true" to use angular.equals would be handy.
Reason: See plnkr: http://plnkr.co/edit/2PaG9wqRK8V0GWH5hkWl?p=preview Having ids 10,11,12 all return when filtering by 1. We need exact search. :-) I could use filterFilter for this example, but in complex cases, when filterBy comes handy this would be super-cool.
Range is a useful function for python. Would you mind to add this also?
Ref: http://stackoverflow.com/questions/11873570/angularjs-for-loop-with-numbers-ranges
I'm using the example with team players from the main documentation, and when I run it I get the following error:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: interceptedExpression; newVal: 22; oldVal: 19"],["fn: interceptedExpression; newVal: 25; oldVal: 22"],["fn: interceptedExpression; newVal: 28; oldVal: 25"],["fn: interceptedExpression; newVal: 31; oldVal: 28"],["fn: interceptedExpression; newVal: 34; oldVal: 31"]] http://errors.angularjs.org/1.3.0-beta.18/$rootScope/infdig?p0=10&p1=%5B%5B…A%20interceptedExpression%3B%20newVal%3A%2034%3B%20oldVal%3A%2031%22%5D%5D
I'm using angular-filter.js v0.1.1 and angular v1.3.0-beta.18.
Any suggestions?
I tried to use the ui.mask and I think an optional value should be added, because the ng-model doesn't return any values if the mask is not complete. ex:
<input ng-model="formData.plateNo" type="text" ui-mask="AAA-9999">
if I input ABC-1234
It will work, but if I try to input ABC-123
the formData.plateNo will be empty.
I would need additional string filter for padding (leftpad, rightpad)
What do you think?
Filter by working fine if- there is a single item 0n corresponding users
filterBy: ['users.strict']: 'john'
But filterBy not working in following json if users have multiple items
$scope.data = [
{ id: 1, users: [{ first_name: 'Rob', last_name: 'John', mobile: 4444 },{ first_name: 'Robin', last_name: 'Johny', mobile: 44447 },{ first_name: 'Robot', last_name: 'Johno', mobile: 44044 }] },
{ id: 2, users: [{ first_name: 'Johni', last_name: 'Wayno', mobile: 3333 },{ first_name: 'John', last_name: 'Wayne', mobile: 3333 }] },
{ id: 3, users: [{ first_name: 'Rob1', last_name: 'Johansson1', mobile: 2222 },{ first_name: 'Rob2', last_name: 'Johansson2', mobile: 29222 } },
{ id: 4, users: { first_name: 'Mike', last_name: 'Terry', mobile: 1111 } }
];
It would be really nice if I could cherry pick only the filters I want, kind of like UI-Bootstrap.
Having traipsed through the codebase a little bit, there seems to be some somewhat tight coupling - specifically with the filterWatcher
provider.
That said, this is a fantastic project, great work!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.