Solved

Dropdown selection using Angularjs

Posted on 2014-02-22
1
1,973 Views
Last Modified: 2014-02-24
Hi Experts,

I am using HTML5 and AngularJS and have a dropdown that contains state codes (Ex: AL,NY,CA,DE,FL,NJ etc) .For instance  if a user from New york state logon to the system then in the  dropdown "NY" should be selected , I will get current user state code via Angular service. Once I get current user from service in the controller I should bind it to dropdown .How can I achieve this using angularJS ? Any sample working code would be highly appreciated.

Thanks in Advance
0
Comment
Question by:ksd123
1 Comment
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
Test page : http://jsfiddle.net/s2Ff9/

<div ng-app="myApp" ng-controller="myCtrl">
	<select ng-model="selectedState" ng-options="s.name for s in states"></select>
</div>

Open in new window


	var myApp = angular.module("myApp", []);

	var myCtrl = myApp.controller("myCtrl", ["$scope", "State", function($scope, State) {

		$scope.states = [];

		State.getStates().then(function(states) {
			$scope.states = states;
		});

		State.getMyState().then(function(state) {
			for(var s=0;s<$scope.states.length;s++) {
				if(state == $scope.states[s].abbreviation) {
					$scope.selectedState = $scope.states[s];
					break;
				}
			}
		});

	}]);

    myApp.factory("State", ["$q", "$timeout", function($q, $timeout) {
		return {
			getMyState : function() {
				var deferred = $q.defer();
				$timeout(function() { // WE USE A TIMER TO DO THE SIMULATION
					var s = "NY";
					deferred.resolve(s);
				}, 2000);
				return deferred.promise;
			},
			getStates: function() {
				var deferred = $q.defer();
				$timeout(function() { // WE USE A TIMER TO DO THE SIMULATION
					var data = [{"name":"Alabama","abbreviation":"AL"},{"name":"Alaska","abbreviation":"AK"},{"name":"American Samoa","abbreviation":"AS"},{"name":"Arizona","abbreviation":"AZ"},{"name":"Arkansas","abbreviation":"AR"},{"name":"California","abbreviation":"CA"},{"name":"Colorado","abbreviation":"CO"},{"name":"Connecticut","abbreviation":"CT"},{"name":"Delaware","abbreviation":"DE"},{"name":"District Of Columbia","abbreviation":"DC"},{"name":"Federated States Of Micronesia","abbreviation":"FM"},{"name":"Florida","abbreviation":"FL"},{"name":"Georgia","abbreviation":"GA"},{"name":"Guam","abbreviation":"GU"},{"name":"Hawaii","abbreviation":"HI"},{"name":"Idaho","abbreviation":"ID"},{"name":"Illinois","abbreviation":"IL"},{"name":"Indiana","abbreviation":"IN"},{"name":"Iowa","abbreviation":"IA"},{"name":"Kansas","abbreviation":"KS"},{"name":"Kentucky","abbreviation":"KY"},{"name":"Louisiana","abbreviation":"LA"},{"name":"Maine","abbreviation":"ME"},{"name":"Marshall Islands","abbreviation":"MH"},{"name":"Maryland","abbreviation":"MD"},{"name":"Massachusetts","abbreviation":"MA"},{"name":"Michigan","abbreviation":"MI"},{"name":"Minnesota","abbreviation":"MN"},{"name":"Mississippi","abbreviation":"MS"},{"name":"Missouri","abbreviation":"MO"},{"name":"Montana","abbreviation":"MT"},{"name":"Nebraska","abbreviation":"NE"},{"name":"Nevada","abbreviation":"NV"},{"name":"New Hampshire","abbreviation":"NH"},{"name":"New Jersey","abbreviation":"NJ"},{"name":"New Mexico","abbreviation":"NM"},{"name":"New York","abbreviation":"NY"},{"name":"North Carolina","abbreviation":"NC"},{"name":"North Dakota","abbreviation":"ND"},{"name":"Northern Mariana Islands","abbreviation":"MP"},{"name":"Ohio","abbreviation":"OH"},{"name":"Oklahoma","abbreviation":"OK"},{"name":"Oregon","abbreviation":"OR"},{"name":"Palau","abbreviation":"PW"},{"name":"Pennsylvania","abbreviation":"PA"},{"name":"Puerto Rico","abbreviation":"PR"},{"name":"Rhode Island","abbreviation":"RI"},{"name":"South Carolina","abbreviation":"SC"},{"name":"South Dakota","abbreviation":"SD"},{"name":"Tennessee","abbreviation":"TN"},{"name":"Texas","abbreviation":"TX"},{"name":"Utah","abbreviation":"UT"},{"name":"Vermont","abbreviation":"VT"},{"name":"Virgin Islands","abbreviation":"VI"},{"name":"Virginia","abbreviation":"VA"},{"name":"Washington","abbreviation":"WA"},{"name":"West Virginia","abbreviation":"WV"},{"name":"Wisconsin","abbreviation":"WI"},{"name":"Wyoming","abbreviation":"WY"}];
					deferred.resolve(data);
				}, 500);
				return deferred.promise;
			}
		}

	}]);

Open in new window

0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now