Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Preserve state of  dropdown using tabs in AngularJS

Posted on 2014-01-21
3
Medium Priority
?
1,303 Views
Last Modified: 2014-02-26
Hi Experts,

I am developing single page application using angularjs,html5,bootstrap and ASP.net MVC.The landing page has 3 tabs and common Save for all the tabs and in one of the tab I have a dropdown and the code is  similar to below code in Angular.First time when the page loads the value for the dropdown should be "None" and if user selects a value  in the dropdown  and navigates to other tabs and return backs to dropdown and should see last selected option ie. I should maintain the previous state of the dropdown while navigating the tabs.

In the below example if I select  option "Yellow" and then navigate to other tabs and back to original tab it should retain "Yellow" option. That means I should only show "None" at the first time when user Login.

In the code , I am just initializing the dropdown value  to "None" in the controller at all times , but I need this to be "None" only first time.How can I achieve this using angularjs?


 $scope.state = $scope.status[0]; //This will always set tDropdown to None 

Open in new window


demo
0
Comment
Question by:ksd123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 23

Accepted Solution

by:
Ioannis Paraskevopoulos earned 1500 total points
ID: 39796766
Hi,

I think you need to check $scope.state before setting it:
    if (typeof $scope.state === 'undefined') {
            $scope.state = $scope.status[0];
    }

Open in new window


Giannis
0
 

Author Comment

by:ksd123
ID: 39799321
I tried above code and it's  not working,when I switch between tabs , it always select "None" option in the dropdown selection.
0
 

Author Closing Comment

by:ksd123
ID: 39888346
Thank you.  Actually there is typo in my code and later I  figure it out and  now the above code is working fine for my issue.
0

Featured Post

Give Your Engineering Team a Productivity Boost

Learn why container technology is so powerful and how it can provide your team with productivity gains and other benefits.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

715 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