{"id":61,"date":"2012-11-19T14:52:22","date_gmt":"2012-11-19T14:52:22","guid":{"rendered":"http:\/\/ramandv.com\/blog\/?p=61"},"modified":"2013-07-04T08:35:31","modified_gmt":"2013-07-04T08:35:31","slug":"html-select-element-with-angular-data-binding","status":"publish","type":"post","link":"http:\/\/www.ramandv.com\/blog\/html-select-element-with-angular-data-binding\/","title":{"rendered":"HTML SELECT element with angular data-binding"},"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>The Angular js ng-options directive supports the following the possible options<\/p>\n<p><strong>for array data sources:<\/strong><\/p>\n<ul>\n<li>label for value in array<\/li>\n<li>select as label for value in array<\/li>\n<li>label group by group for value in array<\/li>\n<li>select as label group by group for value in array<\/li>\n<\/ul>\n<p><strong>for object data sources:<\/strong><\/p>\n<ul>\n<li>label for (key , value) in object<\/li>\n<li>select as label for (key , value) in object<\/li>\n<li>label group by group for (key, value) in object<\/li>\n<li>select as label group by group for (key, value) in obj <\/li>\n<\/ul>\n<p>The following simple JSFiddle shall helps you in understanding the usage of the above.<\/p>\n<p><em>Javascript<\/em><\/p>\n<pre><code>function ControllerA($scope) {\n    $scope.optionsArray = [1,2,3,4,5];\n    $scope.optionsObject = {\"India\" : \"IN\" , \"Singapore\" : \"SG\", \"Malaysia\" : \"MY\"};\n    $scope.optionsGroup = [\n        { \"country\" : \"India\" , \"city\" : \"Chennai\"}, \n        { \"country\" : \"India\" , \"city\" : \"Mumbai\"},\n        { \"country\" : \"India\" , \"city\" : \"Delhi\"},\n        { \"country\" : \"India\" , \"city\" : \"Calcutta\"},\n        { \"country\" : \"Singapore\" , \"city\" : \"Singapore\"}\n    ];\n\n}\u200b\n<\/code><\/pre>\n<p><em>HTML<\/em><\/p>\n<pre><code>&lt;div ng-controller=\"ControllerA\" ng-app&gt;\n    Simple Array as options&lt;br\/&gt;\n    &lt;select ng-options=\"value for value in optionsArray\" ng-model=\"chosenA\"&gt;\n&lt;\/select&gt;&lt;br\/&gt;\n    chosenA = {{chosenA}}&lt;br\/&gt;\n    &lt;hr\/&gt;\n\n\n\n    Simple options&lt;br\/&gt;\n    &lt;select ng-options=\"value for (key, value) in optionsObject \" ng-model=\"chosenO\"&gt;\n&lt;\/select&gt;&lt;br\/&gt;\n    chosenO = {{chosenO}}&lt;br\/&gt;\n    &lt;hr\/&gt;    \n\n\n\n    Simple Object with key as value&lt;br\/&gt;\n    &lt;select ng-options=\"value as key for (key, value) in optionsObject \" ng-model=\"chosenO1\"&gt;\n&lt;\/select&gt;&lt;br\/&gt;\n    chosenO1 = {{chosenO1}}&lt;br\/&gt;\n    &lt;hr\/&gt;    \n\n\n    Options Group&lt;br\/&gt;\n    &lt;select ng-options=\"value.city group by value.country for value in optionsGroup\" ng-model=\"chosenO2\"&gt;\n&lt;\/select&gt;&lt;br\/&gt;\n    chosenO2 = {{chosenO2}}&lt;br\/&gt;\n    &lt;hr\/&gt;        \n&lt;\/div&gt;\n<\/code><\/pre>\n<p><strong>JsFiddle<\/strong><\/p>\n<p><a href=\"http:\/\/jsfiddle.net\/ramandv\/zFtkR\/\" title=\"HTML Select with Angular JS [Object, Array and OptionsGroup]\">http:\/\/jsfiddle.net\/ramandv\/zFtkR\/<\/a><\/p>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>The Angular js ng-options directive supports the following the possible options for array data sources: label for value in array select as label for value in array label group by group for value in array select as label group by &hellip; <a href=\"http:\/\/www.ramandv.com\/blog\/html-select-element-with-angular-data-binding\/\">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,6],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"AngularJS select html element with ng-options as Array or Object. This post also give example of OptionsGroup\" \/>\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\/html-select-element-with-angular-data-binding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML SELECT element with angular data-binding - Articles for Developers\" \/>\n<meta property=\"og:description\" content=\"AngularJS select html element with ng-options as Array or Object. This post also give example of OptionsGroup\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.ramandv.com\/blog\/html-select-element-with-angular-data-binding\/\" \/>\n<meta property=\"og:site_name\" content=\"Articles for Developers\" \/>\n<meta property=\"article:published_time\" content=\"2012-11-19T14:52:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-07-04T08:35:31+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\/html-select-element-with-angular-data-binding\/#webpage\",\"url\":\"http:\/\/www.ramandv.com\/blog\/html-select-element-with-angular-data-binding\/\",\"name\":\"HTML SELECT element with angular data-binding - Articles for Developers\",\"isPartOf\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/#website\"},\"datePublished\":\"2012-11-19T14:52:22+00:00\",\"dateModified\":\"2013-07-04T08:35:31+00:00\",\"author\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658\"},\"description\":\"AngularJS select html element with ng-options as Array or Object. This post also give example of OptionsGroup\",\"breadcrumb\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/html-select-element-with-angular-data-binding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.ramandv.com\/blog\/html-select-element-with-angular-data-binding\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/html-select-element-with-angular-data-binding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"HTML SELECT element with angular data-binding\"}]},{\"@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":{"description":"AngularJS select html element with ng-options as Array or Object. This post also give example of OptionsGroup","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\/html-select-element-with-angular-data-binding\/","og_locale":"en_US","og_type":"article","og_title":"HTML SELECT element with angular data-binding - Articles for Developers","og_description":"AngularJS select html element with ng-options as Array or Object. This post also give example of OptionsGroup","og_url":"http:\/\/www.ramandv.com\/blog\/html-select-element-with-angular-data-binding\/","og_site_name":"Articles for Developers","article_published_time":"2012-11-19T14:52:22+00:00","article_modified_time":"2013-07-04T08:35:31+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\/html-select-element-with-angular-data-binding\/#webpage","url":"http:\/\/www.ramandv.com\/blog\/html-select-element-with-angular-data-binding\/","name":"HTML SELECT element with angular data-binding - Articles for Developers","isPartOf":{"@id":"http:\/\/www.ramandv.com\/blog\/#website"},"datePublished":"2012-11-19T14:52:22+00:00","dateModified":"2013-07-04T08:35:31+00:00","author":{"@id":"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658"},"description":"AngularJS select html element with ng-options as Array or Object. This post also give example of OptionsGroup","breadcrumb":{"@id":"http:\/\/www.ramandv.com\/blog\/html-select-element-with-angular-data-binding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.ramandv.com\/blog\/html-select-element-with-angular-data-binding\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.ramandv.com\/blog\/html-select-element-with-angular-data-binding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"HTML SELECT element with angular data-binding"}]},{"@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-Z","_links":{"self":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/61"}],"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=61"}],"version-history":[{"count":7,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/61\/revisions"}],"predecessor-version":[{"id":151,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/61\/revisions\/151"}],"wp:attachment":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/categories?post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/tags?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}