Angular JS 'Startswith' custom filter

Question

So I've been trying a while to make a custom filter that searches for the 'Startswith' parameters rather than the 'Contains'. Every filter that I've written haven't seem to work properly. Here is an example of what I'm trying to achieve ---> http://jsfiddle.net/DMSChris/9ptr9/

function FilterCtrl() {
var scope = this;
scope.doFilter = function(elem) { 
    if(!scope.searchText) return true;
    return elem.last_name.toLowerCase().indexOf( scope.searchText.toLowerCase()) == 0; 
};

}

http://jsbin.com/OyubElO/1/edit - Here is where I'm at right now.

  <ul border="1px" ng-repeat="msg in messages | filter:search:strict">

<li>{{msg.last_name}}</li>

Any help would be greatly appreciated!

If elem.last_name can be a long string, you may want to consider truncating and then comparing with === to the text to find — Paul S.
– Paul S., Commented Oct 21, 2013 at 17:50

mark · Accepted Answer · 2014-11-15 00:28:09Z

34

A simple way to do this is to add a new method to your scope.

$scope.startsWith = function (actual, expected) {
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
}

Then change the filter syntax on your element.

<ul border="1px" ng-repeat="msg in messages | filter:search:startsWith">

Here is a working plunkr with the example above.

edited Nov 15, 2014 at 0:28

answered Mar 18, 2014 at 0:24

mark

1,7791 gold badge18 silver badges29 bronze badges

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

7 Comments

mark Over a year ago

@Robin I've added a plunkr with the example. What didn't work for you?

Shadow Over a year ago

@mark plunkr doesn't seem to be there. But this worked for me!!

mark Over a year ago

@Shadow thanks for letting me know! I cleaned up my plunks and accidentally deleted that one. It's recreated now.

abdoutelb Over a year ago

@mark This working perfectly, i just can't understand what is expected variable needed for ?

Sunny Over a year ago

Extended question on this which formats the filtered result. Any help is highly appreciated! stackoverflow.com/questions/46728544/…

|

user3454062 · Accepted Answer · 2014-06-05 07:54:27Z

3

Filter in object

  $scope.fmyData = $filter('filter')($scope.AllMyData, $scope.filterOptions,function (actual, expected) {
                    return actual.toLowerCase().indexOf(expected.toLowerCase()) == 0;
                });

answered Jun 5, 2014 at 7:54

user3454062

1712 silver badges1 bronze badge

1 Comment

Venkaiah Yepuri Over a year ago

Hi @user35.. , any working plunker, please ? it really needs me.Thanks.

4b0 · Accepted Answer · 2018-04-16 08:46:49Z

0

Now pure javascript itself has the startsWith() method on strings. But it will not be supported by IE11.

See here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

edited Apr 16, 2018 at 8:46

4b0

22.4k30 gold badges97 silver badges143 bronze badges

answered Apr 16, 2018 at 8:45

Vissu

2,0539 gold badges42 silver badges59 bronze badges

Collectives™ on Stack Overflow

Angular JS 'Startswith' custom filter

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related