{"id":828,"date":"2016-05-14T05:58:55","date_gmt":"2016-05-14T05:58:55","guid":{"rendered":"http:\/\/box.jharaphula.com\/?p=828"},"modified":"2022-09-04T05:47:10","modified_gmt":"2022-09-04T11:17:10","slug":"ng-repeat-conditional-filter-angularjs","status":"publish","type":"post","link":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/","title":{"rendered":"Example of ng-repeat Conditional Filter to bind data in AngularJS"},"content":{"rendered":"<p>In AngularJS ng-repeat is a frequently used Directive. Like a For loop this Directive works. I mean if you are looking to bind list of records to a HTML Control this directive helps. You must noticed in many case during we binding data using iterations, many times we required to Filter them Conditionally. In such case how we can implement ng-repeat Conditional Filter we are showing this demo in below example.<\/p>\n<p>Here I Created a Customer list inside my controller CustomersCon. <strong>$scope.Customers comes with Name &amp; Status fields. Name is the name of Customer &amp; Status is it&#8217;s state Active or Inactive<\/strong>. In HTML body I am showing separately Active &amp; Inactive Customers list using ng-repeat directive. To Filter both these status type (Active &amp; Inactive) separately here I used ng-show &amp; ng-hide <a href=\"https:\/\/jharaphula.com\/restrict-option-custom-directive\/\" target=\"_blank\" rel=\"noopener noreferrer\">directives from AngularJS<\/a>.<\/p>\n<p>For Active customers list here inside ng-repeat I used ng-show=&#8221;Customer.Status==&#8217;Active'&#8221;. <strong>Similarly for inactive Customers list I used ng-hide=&#8221;Customer.Status==&#8217;Active'&#8221;<\/strong>. Also the same Filter can be done using ng-if. ng-show, ng-hide or ng-if can be called Conditional Filters in AngularJS. All the three ng-show, ng-hide &amp; ng-if accepts boolean values as True or False. If the value is True it will execute the statement else not. To run this demo copy the below codes to a Notepad file &amp; Save it as a HTML file. Then Open the File in your Browser.<\/p>\n<h3>ng-repeat Conditional Filter Demo App<\/h3>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;html ng-app=&quot;CustomersMod&quot;&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Example of using conditional filter with ng-repeat?&lt;\/title&gt;\r\n&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.0.1\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\nvar CustomersMod = angular.module('CustomersMod', []);\r\nCustomersMod.controller('CustomersCon', function ($scope) {\r\n$scope.Customers = [\r\n{'Name': 'Airtel', 'Status': 'Active'},\r\n{'Name': 'Vodafone', 'Status': 'inActive'},\r\n{'Name': 'Aircel', 'Status': 'Active'},\r\n{'Name': 'Microsoft Corporation', 'Status': 'Active'},\r\n{'Name': 'Covansys', 'Status': 'inActive'},\r\n{'Name': 'Infosys', 'Status': 'Active'},\r\n{'Name': 'Intel', 'Status': 'Active'},\r\n{'Name': 'Capgemini', 'Status': 'inActive'},\r\n{'Name': 'Dell', 'Status': 'Active'},\r\n{'Name': 'Intex', 'Status': 'Active'},\r\n{'Name': 'Samsung', 'Status': 'inActive'},\r\n{'Name': 'Nokia', 'Status': 'inActive'},\r\n{'Name': 'Motorola', 'Status': 'Active'}\r\n];\r\n});\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-controller=&quot;CustomersCon&quot;&gt;\r\nList of Customers\r\n&lt;hr \/&gt;\r\n&lt;b&gt;Active...&lt;\/b&gt;\r\n&lt;ul&gt;\r\n&lt;li ng-repeat=&quot;Customer in Customers&quot; ng-show=&quot;Customer.Status=='Active'&quot;&gt;{{Customer.Name}}&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n&lt;b&gt;inActive...&lt;\/b&gt;\r\n&lt;ul&gt;\r\n&lt;li ng-repeat=&quot;Customer in Customers&quot; ng-hide=&quot;Customer.Status=='Active'&quot;&gt;{{Customer.Name}}&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In AngularJS ng-repeat is a frequently used Directive. Like a For loop this Directive works. I mean if you are looking to bind list of&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2947,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[37294,37296,37297,37295],"class_list":["post-828","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn-angularjs-with-examples","tag-bind-data-in-angularjs","tag-conditional-filter-to-bind-data","tag-example-of-ng-repeat","tag-ng-repeat-conditional-filter"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Example of ng-repeat Conditional Filter to bind data in AngularJS<\/title>\n<meta name=\"description\" content=\"In AngularJS ng-repeat works like a For loop. Using ng-repeat to bind data Conditionally In this Example I implemented ng-repeat Conditional Filter.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Example of ng-repeat Conditional Filter to bind data in AngularJS\" \/>\n<meta property=\"og:description\" content=\"In AngularJS ng-repeat works like a For loop. Using ng-repeat to bind data Conditionally In this Example I implemented ng-repeat Conditional Filter.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/\" \/>\n<meta property=\"og:site_name\" content=\"OneStop Shop\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/tajinweb\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-14T05:58:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-04T11:17:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/ng-repeat-in-angularjs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"464\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nibedita Panda\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nibedita Panda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/\"},\"author\":{\"name\":\"Nibedita Panda\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3\"},\"headline\":\"Example of ng-repeat Conditional Filter to bind data in AngularJS\",\"datePublished\":\"2016-05-14T05:58:55+00:00\",\"dateModified\":\"2022-09-04T11:17:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/\"},\"wordCount\":456,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jharaphula.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/ng-repeat-in-angularjs.png\",\"keywords\":[\"bind data in AngularJS\",\"Conditional Filter to bind data\",\"Example of ng-repeat\",\"ng-repeat Conditional Filter\"],\"articleSection\":[\"AngularJS with Examples\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/\",\"url\":\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/\",\"name\":\"Example of ng-repeat Conditional Filter to bind data in AngularJS\",\"isPartOf\":{\"@id\":\"https:\/\/jharaphula.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/ng-repeat-in-angularjs.png\",\"datePublished\":\"2016-05-14T05:58:55+00:00\",\"dateModified\":\"2022-09-04T11:17:10+00:00\",\"description\":\"In AngularJS ng-repeat works like a For loop. Using ng-repeat to bind data Conditionally In this Example I implemented ng-repeat Conditional Filter.\",\"breadcrumb\":{\"@id\":\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#primaryimage\",\"url\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/ng-repeat-in-angularjs.png\",\"contentUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/ng-repeat-in-angularjs.png\",\"width\":750,\"height\":464,\"caption\":\"Example of ng-repeat Conditional Filter to bind data in AngularJS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jharaphula.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Example of ng-repeat Conditional Filter to bind data in AngularJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jharaphula.com\/#website\",\"url\":\"https:\/\/jharaphula.com\/\",\"name\":\"OneStop Shop\",\"description\":\"Blog for SEO Guest Posting, Digital Marketing or Home Remedies\",\"publisher\":{\"@id\":\"https:\/\/jharaphula.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jharaphula.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jharaphula.com\/#organization\",\"name\":\"OneStop Shop\",\"url\":\"https:\/\/jharaphula.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg\",\"contentUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg\",\"width\":409,\"height\":91,\"caption\":\"OneStop Shop\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/tajinweb\",\"https:\/\/x.com\/guestpostingopp\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3\",\"name\":\"Nibedita Panda\",\"description\":\"Mrs. Nibedita is a housewife. She is passionate about to write various information's depending upon the growing market trend. In our unit she takes care of many major releases. Her contribution is most valued for us.\",\"sameAs\":[\"https:\/\/jharaphula.com\"],\"url\":\"https:\/\/jharaphula.com\/author\/nibeditap\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Example of ng-repeat Conditional Filter to bind data in AngularJS","description":"In AngularJS ng-repeat works like a For loop. Using ng-repeat to bind data Conditionally In this Example I implemented ng-repeat Conditional Filter.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/","og_locale":"en_US","og_type":"article","og_title":"Example of ng-repeat Conditional Filter to bind data in AngularJS","og_description":"In AngularJS ng-repeat works like a For loop. Using ng-repeat to bind data Conditionally In this Example I implemented ng-repeat Conditional Filter.","og_url":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/","og_site_name":"OneStop Shop","article_publisher":"https:\/\/www.facebook.com\/tajinweb","article_published_time":"2016-05-14T05:58:55+00:00","article_modified_time":"2022-09-04T11:17:10+00:00","og_image":[{"width":750,"height":464,"url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/ng-repeat-in-angularjs.png","type":"image\/png"}],"author":"Nibedita Panda","twitter_misc":{"Written by":"Nibedita Panda","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#article","isPartOf":{"@id":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/"},"author":{"name":"Nibedita Panda","@id":"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3"},"headline":"Example of ng-repeat Conditional Filter to bind data in AngularJS","datePublished":"2016-05-14T05:58:55+00:00","dateModified":"2022-09-04T11:17:10+00:00","mainEntityOfPage":{"@id":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/"},"wordCount":456,"commentCount":0,"publisher":{"@id":"https:\/\/jharaphula.com\/#organization"},"image":{"@id":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/ng-repeat-in-angularjs.png","keywords":["bind data in AngularJS","Conditional Filter to bind data","Example of ng-repeat","ng-repeat Conditional Filter"],"articleSection":["AngularJS with Examples"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/","url":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/","name":"Example of ng-repeat Conditional Filter to bind data in AngularJS","isPartOf":{"@id":"https:\/\/jharaphula.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#primaryimage"},"image":{"@id":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/ng-repeat-in-angularjs.png","datePublished":"2016-05-14T05:58:55+00:00","dateModified":"2022-09-04T11:17:10+00:00","description":"In AngularJS ng-repeat works like a For loop. Using ng-repeat to bind data Conditionally In this Example I implemented ng-repeat Conditional Filter.","breadcrumb":{"@id":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#primaryimage","url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/ng-repeat-in-angularjs.png","contentUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/ng-repeat-in-angularjs.png","width":750,"height":464,"caption":"Example of ng-repeat Conditional Filter to bind data in AngularJS"},{"@type":"BreadcrumbList","@id":"https:\/\/jharaphula.com\/ng-repeat-conditional-filter-angularjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jharaphula.com\/"},{"@type":"ListItem","position":2,"name":"Example of ng-repeat Conditional Filter to bind data in AngularJS"}]},{"@type":"WebSite","@id":"https:\/\/jharaphula.com\/#website","url":"https:\/\/jharaphula.com\/","name":"OneStop Shop","description":"Blog for SEO Guest Posting, Digital Marketing or Home Remedies","publisher":{"@id":"https:\/\/jharaphula.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jharaphula.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jharaphula.com\/#organization","name":"OneStop Shop","url":"https:\/\/jharaphula.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/","url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg","contentUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg","width":409,"height":91,"caption":"OneStop Shop"},"image":{"@id":"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/tajinweb","https:\/\/x.com\/guestpostingopp"]},{"@type":"Person","@id":"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3","name":"Nibedita Panda","description":"Mrs. Nibedita is a housewife. She is passionate about to write various information's depending upon the growing market trend. In our unit she takes care of many major releases. Her contribution is most valued for us.","sameAs":["https:\/\/jharaphula.com"],"url":"https:\/\/jharaphula.com\/author\/nibeditap\/"}]}},"_links":{"self":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts\/828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/comments?post=828"}],"version-history":[{"count":0,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts\/828\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/media\/2947"}],"wp:attachment":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/media?parent=828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/categories?post=828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/tags?post=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}