{"id":251,"date":"2013-11-07T06:31:07","date_gmt":"2013-11-07T06:31:07","guid":{"rendered":"http:\/\/www.ramandv.com\/blog\/?p=251"},"modified":"2014-06-18T06:54:07","modified_gmt":"2014-06-18T06:54:07","slug":"zurb-foundation-custom-form-angular-js-ng-checked-2","status":"publish","type":"post","link":"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/","title":{"rendered":"Zurb Foundation custom form and Angular JS ng-checked"},"content":{"rendered":"\n<!-- Quick Adsense WordPress Plugin: http:\/\/quickadsense.com\/ -->\n<div class=\"e9e85ee105af8a6a4a383deebf1fa216\" data-index=\"1\" style=\"float: none; margin:10px 0 10px 0; text-align:center;\">\n<script type=\"text\/javascript\"><!--\r\ngoogle_ad_client = \"ca-pub-4917982260456644\";\r\n\/* ramandv.com-ad1 *\/\r\ngoogle_ad_slot = \"9226290554\";\r\ngoogle_ad_width = 728;\r\ngoogle_ad_height = 90;\r\n\/\/-->\r\n<\/script>\r\n<script type=\"text\/javascript\"\r\nsrc=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\r\n<\/script>\n<\/div>\n<p>When using the Zurb Foundation custom form checkbox, the angular js ng-checked directive will not mark\/unmark the checkbox when there is change occurs in the angular model.<\/p>\n<p>The reason being the &#8220;custom form check box&#8221; creates new span element for the check box to make the styling easy.<\/p>\n<pre><code>  &lt;label for=\"checkbox1\"&gt;\n      &lt;input type=\"checkbox\" id=\"checkbox1\" style=\"display: none;\"&gt;\n      &lt;!-- the following span created by foundation checkbox --&gt;\n      &lt;span class=\"custom checkbox\"&gt;&lt;\/span&gt; Label for Checkbox\n  &lt;\/label&gt;\n<\/code><\/pre>\n<p>Use the following directive instead of &#8220;ng-checked&#8221;. Just you need to change &#8220;ng-checked&#8221; to &#8220;ng-checked-foundation&#8221;, the params passed to it will be same. It may not be the idle way as it is closely coupled with foundation additional markups. but it solves the issue.<\/p>\n<pre><code>directive('ngCheckedFoundation',['$timeout', function($timeout) {\n    function markCheckBox(value, scope, element, attr) {\n        \/\/timeout to avoid the foundation javascript action changed by this directive\n        $timeout(function() {\n                if(value) {\n                    attr.$set(\"checked\", true);\n                    element.next().addClass('checked');\n                }\n                else {\n                    attr.$set(\"checked\", false);\n                    element.next().removeClass('checked');\n                }\n        }, 200);\n    }\n\n    function link (scope, element, attr, ctrl) {\n        scope.$watch(attr[\"ngCheckedFoundation\"], function(n,o) {\n          if(n != o) {\n            markCheckBox(n, scope, element, attr);\n          }\n        });\n        markCheckBox(scope.$eval(attr.ngCheckedFoundation), scope, element, attr);\n    }\n\n    return({\n        link: link,\n        restrict: \"A\",\n    });\n}])\n<\/code><\/pre>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>When using the Zurb Foundation custom form checkbox, the angular js ng-checked directive will not mark\/unmark the checkbox when there is change occurs in the angular model. The reason being the &#8220;custom form check box&#8221; creates new span element for &hellip; <a href=\"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[7],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zurb Foundation custom form and Angular JS ng-checked - Articles for Developers\" \/>\n<meta property=\"og:description\" content=\"When using the Zurb Foundation custom form checkbox, the angular js ng-checked directive will not mark\/unmark the checkbox when there is change occurs in the angular model. The reason being the &#8220;custom form check box&#8221; creates new span element for &hellip; Continue reading &rarr;\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Articles for Developers\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-07T06:31:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-06-18T06:54:07+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ramandv\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/#website\",\"url\":\"http:\/\/www.ramandv.com\/blog\/\",\"name\":\"Articles for Developers\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.ramandv.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/#webpage\",\"url\":\"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/\",\"name\":\"Zurb Foundation custom form and Angular JS ng-checked - Articles for Developers\",\"isPartOf\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/#website\"},\"datePublished\":\"2013-11-07T06:31:07+00:00\",\"dateModified\":\"2014-06-18T06:54:07+00:00\",\"author\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658\"},\"breadcrumb\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Zurb Foundation custom form and Angular JS ng-checked\"}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658\",\"name\":\"ramandv\",\"url\":\"http:\/\/www.ramandv.com\/blog\/author\/ramandv\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"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":"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/","og_locale":"en_US","og_type":"article","og_title":"Zurb Foundation custom form and Angular JS ng-checked - Articles for Developers","og_description":"When using the Zurb Foundation custom form checkbox, the angular js ng-checked directive will not mark\/unmark the checkbox when there is change occurs in the angular model. The reason being the &#8220;custom form check box&#8221; creates new span element for &hellip; Continue reading &rarr;","og_url":"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/","og_site_name":"Articles for Developers","article_published_time":"2013-11-07T06:31:07+00:00","article_modified_time":"2014-06-18T06:54:07+00:00","twitter_misc":{"Written by":"ramandv","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"http:\/\/www.ramandv.com\/blog\/#website","url":"http:\/\/www.ramandv.com\/blog\/","name":"Articles for Developers","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.ramandv.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/#webpage","url":"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/","name":"Zurb Foundation custom form and Angular JS ng-checked - Articles for Developers","isPartOf":{"@id":"http:\/\/www.ramandv.com\/blog\/#website"},"datePublished":"2013-11-07T06:31:07+00:00","dateModified":"2014-06-18T06:54:07+00:00","author":{"@id":"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658"},"breadcrumb":{"@id":"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.ramandv.com\/blog\/zurb-foundation-custom-form-angular-js-ng-checked-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Zurb Foundation custom form and Angular JS ng-checked"}]},{"@type":"Person","@id":"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658","name":"ramandv","url":"http:\/\/www.ramandv.com\/blog\/author\/ramandv\/"}]}},"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6YZCe-43","_links":{"self":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/251"}],"collection":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/comments?post=251"}],"version-history":[{"count":3,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/251\/revisions"}],"predecessor-version":[{"id":254,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/251\/revisions\/254"}],"wp:attachment":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/media?parent=251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/categories?post=251"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/tags?post=251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}