read

Hello again!

I was looking for an implementation of paging using angular and encountered this. This post just shows how I extended this implementation to have some sort of filtering. Obviously, I am very much a beginner in angular, so do recommend if you think there is a better way of doing this! I am not going to do a whole lot of explaining here and more or less directly get in to code!

I have built upon this sample by changing it in to a user listing page and also by adding a search box. This is unlike the angular filter, since I just don’t want to filter just the items in the first page. For this I have used $watch on a new scope variable sText that is used for displaying the paged items, as shown below:

    $scope.$watch('sText', function () {
        if ($scope.sText.length == 0 || $scope.sText.length > 2) {
            $scope.makeUsers();
            $scope.updateResults();
        }
    });

In the above snippet, makeUsers is a function that just generates 1000 entries with random first & last names and the updateResults function deals with setting up the data only for a certain page along with the pager bar. sText is set as the model for a text box as shown below:

     <input ng-model="sText" class="form-control" style="width: 300px" placeholder="Search Term (atleast 3 chars)" />

Here is a plunker for the same! And, learning angular was the intention for this, so go easy on the performance stuff and w/ the correctness of the makeUsers function!

Happy coding!!!

Karthik


Published on

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

the dotNet way!

experiments w/ asp.net, c#, ruby and many more!!

Back to Home