{"id":236,"date":"2017-03-23T11:02:32","date_gmt":"2017-03-23T11:02:32","guid":{"rendered":"http:\/\/codeinsightacademy.com\/blog\/?p=236"},"modified":"2017-05-11T15:18:10","modified_gmt":"2017-05-11T15:18:10","slug":"filters","status":"publish","type":"post","link":"https:\/\/codeinsightacademy.com\/blog\/angular-js\/filters\/","title":{"rendered":"Filters"},"content":{"rendered":"
<DOCTYPE html>\r\n    <html>\r\n        <head>\r\n            <meta CHARSET=\"UTF-8\">\r\n            <script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.8\/angular.min.js\"><\/script>\r\n        <\/head>\r\n        <body ng-app=\"myApp\" ng-controller=\"myCtrl\">\r\n            <h2>Filters (uppercase, lowercase, currency, filter, Custom filter)<\/h2>\r\n            <fieldset>\r\n                <legend>\r\n                    Uppercase\r\n                <\/legend>\r\n                <div ng-init='name = {\"first_name\":\"Shailesh\"}'>\r\n                    {{name.first_name| uppercase}}\r\n                <\/div>\r\n            <\/fieldset>\r\n            <fieldset>\r\n                <legend>\r\n                    Lowercase\r\n                <\/legend>\r\n                <div ng-init='month = {\"first\":\"january\"}'>\r\n                    {{month.first| lowercase}}\r\n                <\/div>\r\n            <\/fieldset>\r\n            <fieldset>\r\n                <legend>\r\n                    Currency\r\n                <\/legend>\r\n                <div ng-init='currency = {\"inr\": 20000, \"usd\":30000, \"euro\": 25000}'>\r\n                    <!-- {{ currency_expression | currency : symbol : fractionSize}} -->\r\n                    {{currency.inr| currency : ' &#8377;' : 3}} <br\/>\r\n                    {{currency.usd| currency}} <br\/>\r\n                    {{currency.euro| currency : '&euro;'}}\r\n                <\/div>\r\n            <\/fieldset>\r\n            <fieldset>\r\n                <legend>\r\n                    Single Filter\r\n                <\/legend>\r\n                <div ng-init='city = [\"Mumbai\", \"Pune\", \"Nagpur\"]'>\r\n                    <table border=\"1\">\r\n                        <ul>\r\n                            <li ng-repeat=\"x in city\">\r\n                                {{x}}\r\n                            <\/li>\r\n                        <\/ul>\r\n                    <\/table>\r\n                <\/div>\r\n            <\/fieldset>\r\n            <fieldset>\r\n                <legend>\r\n                    Multiple Filter\r\n                <\/legend>\r\n                <div>\r\n                    Search by any <input type=\"text\" name=\"\" ng-model=\"search.$\"\/> <br\/>\r\n                    Search by Name <input type=\"text\" name=\"\" ng-model=\"search.name\"\/> <br\/>\r\n                    Search Country <input type=\"text\" name=\"\" ng-model=\"search.country\"\/> <br\/>\r\n                    <table border=\"1\">\r\n                        <tr ng-repeat=\"x in emp_records| filter:search\">\r\n                            <td>{{x.name}}<\/td>\r\n                            <td>{{x.country}}<\/td>\r\n                            <td>{{x.age}}<\/td>\r\n                        <\/tr>\r\n                    <\/table>\r\n                <\/div>\r\n            <\/fieldset>\r\n            <fieldset>\r\n                <legend>\r\n                    Multiple Filter Skip Few\r\n                <\/legend>\r\n                <div>\r\n                    Search by Name or Country Only <input type=\"text\" name=\"\" ng-model=\"query\"\/> <br\/>\r\n                    <table border=\"1\">\r\n                        <tr ng-repeat=\"x in emp_records| filter:search2\">\r\n                            <td>{{x.name}}<\/td>\r\n                            <td>{{x.country}}<\/td>\r\n                            <td>{{x.age}}<\/td>\r\n                        <\/tr>\r\n                    <\/table>\r\n                <\/div>\r\n            <\/fieldset>\r\n        <\/body>\r\n        <script>\r\n            var app = angular.module(\"myApp\", []);\r\n            app.controller(\"myCtrl\", function ($scope) {\r\n                $scope.emp_records = [\r\n                    {name: 'Jani', country: 'Norway', 'age': 20},\r\n                    {name: 'Carl', country: 'Sweden', 'age': 21},\r\n                    {name: 'Margareth', country: 'England', 'age': 22},\r\n                    {name: 'Hege', country: 'Norway', 'age': 23},\r\n                    {name: 'Joe', country: 'Denmark', 'age': 24},\r\n                    {name: 'Gustav', country: 'Sweden', 'age': 25},\r\n                    {name: 'Birgit', country: 'Denmark', 'age': 26},\r\n                    {name: 'Mary', country: 'England', 'age': 27},\r\n                    {name: 'Kai', country: 'Norway', 'age': 28}\r\n                ];\r\n\r\n                $scope.search2 = function (row) {\r\n                    return (angular.lowercase(row.name).indexOf(angular.lowercase($scope.query) || '') !== -1 ||\r\n                            angular.lowercase(row.country).indexOf(angular.lowercase($scope.query) || '') !== -1);\r\n                };\r\n            });\r\n\r\n        <\/script>\r\n    <\/html><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
<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}’> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/236"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":3,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/236\/revisions"}],"predecessor-version":[{"id":247,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/236\/revisions\/247"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/categories?post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/tags?post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}