a8m / angular-filter Goto Github PK

View Code? Open in Web Editor NEW

2.9K 2.9K 341.0 829 KB

Bunch of useful filters for AngularJS (with no external dependencies!)

Home Page: https://github.com/a8m/angular-filter

License: MIT License

JavaScript 100.00%

angular angular-filters filter ng-pipes

angular-filter's People

Contributors

Stargazers

Watchers

Forkers

openainext jacekpolak alejandrolsca pedrolopix ostruk itzahi pulkitmittal ravivit9 tsuz softcane misrv001 karteek-salumuri causecode heyjustin iwoodruff carloscarcamo ajaysinghj8 nvdnkpr baby-ann justinkazemi markandrewj lifelive amit-t dimitriwalters remon amorroma technotects krahman nangal inno-v cvant-drc maseh87 smurf81 naifen00 niemyjski henrynok schmich mayank-patel edsonf blissettdmb mariusc23 panalbish simudream jfoy-twc ngbrown-forks sasogr dyorg andryfailli cheerazar darryldecode jimfunk dmackerman mrphilbert shiningyao maksimuc24 joshyu supercube1 nasterblue crosstivity zlpan jpollard-cs davidepastore phamtrisi rodolfojnn commandantp howtomake gitter-badger abneralvarado reachmw karna41317 bharat-dpd kangu btjones dassiorleando johnny4young jasonxxen rigup pixelbacon melux gerlstar abel1105 zpzgone gvdasa manumental32 ahmedalejo amanurat andreireitz nadoneves docampog30 bishopsmove zwlcoding ismichaelni gdseller adriien-m noahxinhao sorcrr christian-beckmann hobbesmedia mattspaulding tpsumeta

angular-filter's Issues

defaults filter

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:

id: 1, name: Ariel M, shipping address: 21908
id: 2, name: John F, shipping address: Pickup
id: 3, name: Customer name not available, shipping address: 45841
id: 4, name: Danno L, shipping address: 78612

GroupBy + OrderBy not working

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

unique if one item of many items

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

"first" filter returns an object instead of an array when only one object is present

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.

add coveralls (npm module) for CI coverage

Change the name?

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?

Are custom builds a possibility?

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!

Passing searchField paramaters like in filterBy

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!

Add filter "zero padding"

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

[$injector:modulerr] on including angular-filter

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 ! ;)

[New Feature] .test(), .match() filters

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

Count object of array inside of array

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...

cdnjs version is not the newest

Can you update cdnjs's version? :)

v0.4.1

collections:
- first
- last
- flatten
Math:
- radix

groupBy and countBy have non-standard html in examples

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.

orderBy not working with groupBy

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

Trouble using filters on complex objects

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.

Filter data in nested json

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 } }
];

How to combine Contains and FilterBy

Is it possible to combine filterBy and contains? Where contains should be executed if filterBy does not return results

Contains filter with undefined expression

Shouldn't this return false ? contains.js#L22

{{ ['foo', 'bar'] | contains: undefined }} => true

Contains doesn't refresh on value change

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.

truncate issue

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

shortFmt and floats

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.

string - leftpad, rightpad would be usefull

I would need additional string filter for padding (leftpad, rightpad)

What do you think?

Include 'with'

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.

groupBy throws error

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?

Sorting data with groupBy

It is possible to revers sort groups and elements when using 'groupBy' ?
I tried

(key, value) in logs | orderBy: -dateTime | groupBy:dateTime,
(key, value) in logs | orderBy: dateTime:'true' | groupBy:dateTime

but this doesn't work.

Add mode filter

The mode is the number that is repeated more often than any other.

Add aliases

Add aliases filters for this set of filters #22

For example:

<p>{{ num | isGreaterThan: 100 }}</p>

could use as:

<p>{{ num | >: 100 }}</p>

<p>{{ num | isLessThanOrEqualTo: 100 }}</p>

could use as:

<p>{{ num | <=: 100 }}</p>

Filters on ng-repeat "go crazy" with ng-mouse*

HTML Mouse events don't work as expected when bound to elements using ng-repeat with filters.

On a MacOSX 10.10 MacbookPro:

Firefox: events fire apparently "at random" with many mouseenter and few mouseleave.
Chrome: mouseleave event never fires and mouseenter fires on every mousemove.

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.

Add comparator argument in filterBy [Suggestion]

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.

Use a filter in another one

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;
    };

  }]);

GroupBy with multiple groups

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:

Group name: alpha
- player: Gene
Group name: beta
- player: Gene
- player: George
- player: Paula
Group name: gamma
- player: Steve
- player: Scruath

It is possible? How?

Thanks

Add mean filter

Given an array, returns the mean.

Suggestion: Mask optional value

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.

"angular-filter" as dependency fails

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?

Add a "range" filter

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

Add replaceIfBlank string filter?

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).

Using filters programatically

What is the syntax to use the 'filterBy' filter in JS code?

a8m.where when collection is undefined

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; }

[Suggestion] change current ucfirst behvaior with ucwords, and change ucfirst to uppercase the first word.

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

Filter "where" is unable to perform equality check on false value

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>

Docs

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.

Sum filter

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.

Couldn't find the standard package

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!

0.5.0 digest cycle error with group by.

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.

filterBy only works if the comparator starts with search

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.

create and config grunt file with build task

"First" filter fails with expressions

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

add 'chain' function

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.