Filters

<DOCTYPE html>
    <html>
        <head>
            <meta CHARSET="UTF-8">
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        </head>
        <body ng-app="myApp" ng-controller="myCtrl">
            <h2>Filters (uppercase, lowercase, currency, filter, Custom filter)</h2>
            <fieldset>
                <legend>
                    Uppercase
                </legend>
                <div ng-init='name = {"first_name":"Shailesh"}'>
                    {{name.first_name| uppercase}}
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    Lowercase
                </legend>
                <div ng-init='month = {"first":"january"}'>
                    {{month.first| lowercase}}
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    Currency
                </legend>
                <div ng-init='currency = {"inr": 20000, "usd":30000, "euro": 25000}'>
                    <!-- {{ currency_expression | currency : symbol : fractionSize}} -->
                    {{currency.inr| currency : ' &#8377;' : 3}} <br/>
                    {{currency.usd| currency}} <br/>
                    {{currency.euro| currency : '&euro;'}}
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    Single Filter
                </legend>
                <div ng-init='city = ["Mumbai", "Pune", "Nagpur"]'>
                    <table border="1">
                        <ul>
                            <li ng-repeat="x in city">
                                {{x}}
                            </li>
                        </ul>
                    </table>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    Multiple Filter
                </legend>
                <div>
                    Search by any <input type="text" name="" ng-model="search.$"/> <br/>
                    Search by Name <input type="text" name="" ng-model="search.name"/> <br/>
                    Search Country <input type="text" name="" ng-model="search.country"/> <br/>
                    <table border="1">
                        <tr ng-repeat="x in emp_records| filter:search">
                            <td>{{x.name}}</td>
                            <td>{{x.country}}</td>
                            <td>{{x.age}}</td>
                        </tr>
                    </table>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    Multiple Filter Skip Few
                </legend>
                <div>
                    Search by Name or Country Only <input type="text" name="" ng-model="query"/> <br/>
                    <table border="1">
                        <tr ng-repeat="x in emp_records| filter:search2">
                            <td>{{x.name}}</td>
                            <td>{{x.country}}</td>
                            <td>{{x.age}}</td>
                        </tr>
                    </table>
                </div>
            </fieldset>
        </body>
        <script>
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function ($scope) {
                $scope.emp_records = [
                    {name: 'Jani', country: 'Norway', 'age': 20},
                    {name: 'Carl', country: 'Sweden', 'age': 21},
                    {name: 'Margareth', country: 'England', 'age': 22},
                    {name: 'Hege', country: 'Norway', 'age': 23},
                    {name: 'Joe', country: 'Denmark', 'age': 24},
                    {name: 'Gustav', country: 'Sweden', 'age': 25},
                    {name: 'Birgit', country: 'Denmark', 'age': 26},
                    {name: 'Mary', country: 'England', 'age': 27},
                    {name: 'Kai', country: 'Norway', 'age': 28}
                ];

                $scope.search2 = function (row) {
                    return (angular.lowercase(row.name).indexOf(angular.lowercase($scope.query) || '') !== -1 ||
                            angular.lowercase(row.country).indexOf(angular.lowercase($scope.query) || '') !== -1);
                };
            });

        </script>
    </html>

 

25 Replies to “Filters”

  1. naturally like your web-site but you have to test the spelling on several of your posts. Several of them are rife with spelling issues and I find it very bothersome to tell the reality on the other hand I’ll definitely come back again.

  2. An intriguing discussion is definitely worth comment. I believe that you should write more on this subject, it might not be a taboo matter but usually folks don’t discuss these issues. To the next! Best wishes!!

  3. Howdy are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you need any coding expertise to make your own blog? Any help would be really appreciated!

  4. Hi there would you mind letting me know which hosting company you’re working with? I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot quicker then most. Can you suggest a good internet hosting provider at a honest price? Kudos, I appreciate it!

  5. You really make it seem really easy along with your presentation but I in finding this topic to be really one thing that I feel I would never understand. It sort of feels too complex and very vast for me. I am looking forward on your next put up, I will attempt to get the dangle of it!

  6. I loved as much as you’ll receive carried out right here. The sketch is attractive, your authored subject matter stylish. nonetheless, you command get bought an impatience over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly very often inside case you shield this hike.

  7. hey there and thank you for your info – I’ve definitely picked up something new from right here. I did however expertise several technical points using this website, since I experienced to reload the site many times previous to I could get it to load properly. I had been wondering if your hosting is OK? Not that I’m complaining, but slow loading instances times will sometimes affect your placement in google and could damage your quality score if ads and marketing with Adwords. Well I’m adding this RSS to my email and can look out for much more of your respective interesting content. Ensure that you update this again very soon.

  8. Incredible! This blog looks exactly like my old one! It’s on a completely different subject but it has pretty much the same layout and design. Wonderful choice of colors!

  9. I blog frequently and I seriously thank you for your content. The article has truly peaked my interest. I am going to take a note of your site and keep checking for new information about once a week. I opted in for your RSS feed as well.

  10. I will immediately grab your rss feed as I can’t find your e-mail subscription hyperlink or e-newsletter service. Do you have any? Please permit me understand so that I may just subscribe. Thanks.

  11. It’s perfect time to make some plans for the future and it is time to be happy. I’ve read this post and if I could I desire to suggest you some interesting things or suggestions. Maybe you can write next articles referring to this article. I want to read even more things about it!

  12. Hi there terrific blog! Does running a blog such as this require a lot of work? I have virtually no understanding of computer programming however I was hoping to start my own blog soon. Anyways, if you have any suggestions or tips for new blog owners please share. I understand this is off subject but I simply had to ask. Thanks a lot!

  13. I was extremely pleased to uncover this website. I wanted to thank you for ones time for this wonderful read!! I definitely savored every part of it and i also have you saved to fav to see new information in your blog.

  14. wonderful put up, very informative. I wonder why the opposite experts of this sector do not notice this. You must proceed your writing. I’m sure, you’ve a great readers’ base already!

Leave a Reply to 國產 av Cancel reply

Your email address will not be published.