Creating and Using New `filter` with $filter

Question

Reading Mastering Web Development with AngularJS, I'm trying to create and use a new filter that uses the $filter module/keyword.

HTML

<div ng-controller="MyCtrl"> 
    <table>
        <thead>
            <th>Name</th>
            <th>Description</th>
        </thead>
        <tbody>
            <tr ng-repeat="item in backlog | trim:4">
                <td>{{item}}</td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

angular.module("myApp", [])
.filter("trim", function($filter) {
    var limitToFilter = $filter("limitTo");

    return function(input, limit) {
        console.log("input:", input, "limit:", limit);
        if(input.length > limit) {
            return limitToFilter(input, limit-3) + "...";
        }
        return input;
    };
});

function MyCtrl($scope) {
    $scope.backlog = ["asdfasdf", "BBBBBBBBB", "CCCCCCC", 
                     "DDDDDDD", "EEEE"];
}

I would've expected the first character (4-3 = 1) of each $scope.backlog item to show up. But it appears to print out the first characters of the first item in $scope.backlog, which doesn't make sense to me.

http://jsfiddle.net/9Q6Sk/

Mark Meyer · Accepted Answer · 2014-01-06 21:47:08Z

1

I was able to get your code to work, but not using the built in limitTo filter. It might be a bug with the 1.2.1 version of angular, but I can get it to work in their example. I'm going to investigate further.

The first change I made to your code is to move the filter from the ng-repeat to the actual item. Based on your description you want the first character of each backlog item, not the first backlog item.

HTML

    <tr ng-repeat="item in backlog">                
        <td>{{ item | trim:4 }}</td>            
    </tr>

JavaScript

angular.module("myApp", []).filter("trim", function($filter) {

    return function(input, limit) {
    if(input.length > limit) {
        return $filter('limitTo')(input, limit-3);
    }
        return input;
    };
});

I'm going to continue to investigate why limitTo won't work, even when just applied by itself.

UPDATE

I found the reason that limitTo wasn't working. You had Angular 1.0.1 as an external dependency which overruled the 1.2.1. 1.0.1 does not include the limitTo filter.
Check out this fiddle for a working example

answered Jan 6, 2014 at 21:47

Mark Meyer

3,7443 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kevin Meredith Over a year ago

Hi @NuclearGhost, thanks. How did I have an Angular 1.0.1 dependency? I don't understand.

Mark Meyer Over a year ago

It was in the external dependencies of your jsfiddle. If you forked another fiddle it's possible it was from there. Remove it to get the limit to filter

Mark Meyer Over a year ago

@KevinMeredith have you resolved your issue? Let us know if there are further problems, or please accept a working solution

Kia Raad · Accepted Answer · 2014-01-06 22:07:50Z

The first thing to notice is that you want to limit each item in the backlog so you shouldn't use the filter on the ngRepeat directive. The Second thing to note is when looking at the syntax of your limitToFilter function this is what you'll see:

function (array, limit) {
    if (!(array instanceof Array)) return array;
    limit = int(limit);
    var out = [],
      i, n;

    // check that array is iterable
    if (!array || !(array instanceof Array))
      return out;

    // if abs(limit) exceeds maximum length, trim it
    if (limit > array.length)
      limit = array.length;
    else if (limit < -array.length)
      limit = -array.length;

    if (limit > 0) {
      i = 0;
      n = limit;
    } else {
      i = array.length + limit;
      n = array.length;
    }

    for (; i<n; i++) {
      out.push(array[i]);
    }

    return out;
  }

As you can clearly see, the function is operating on the Array type, not the string type. so in a nutshell you'll have to write your own filtering mechanism to limit the strings you want.

UPDATE

Actually I tried and got it working with the ngRepeat and all those stuff: check this jsFiddle out

Collectives™ on Stack Overflow

Creating and Using New `filter` with $filter

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related