Solved

AngularJS Data Driven Drop Down: Selecting a value from a drop down clears the drop down value on the first change, but then works fine after the first change.

Posted on 2016-08-19
6
97 Views
Last Modified: 2016-08-23
I am using AngularJS, jQuery, and Bootstrap.  I have a couple of drop downs that are data driven, as are the selected values of each.  The first time I change the value of either, the value of the drop down is cleared (shows blank).  Any further changes work fine.  It should, of course, work on the first try, but it doesn't.  Everything seems fine, but that's just not the case...  The drop downs are in a modal form, but that shouldn't have any bearing on this issue.  Please help me figure out how to fix this bug.  Thanks!

This is the code for the drop downs:
<!-- Change Dollar Range Modal Form Inception -->
<div class="modal fade" role="dialog" id="changeRangeModal">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" aira-hidden="true">&times;</button>
                <h3>Update Rule: Dollar Range</h3>
            </div>
            <div class="modal-body">
                <form class="form-inline" name="changeRange">
                    <div>
                        <label for="minMax">Dollar Range</label>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon" id="minRangeLabel">Minimum</span>
                        <select style="width: 182px;"
                            data-ng-model="newMinRange"
                            id="newMinRange"
                            data-ng-options="min.value as min.name for min in lowRange"
                            class="form-control"
                            required>
                        </select>
                        <div>
                            <span data-ng-show="changeRange.newMinRange.$error.required" class="text-danger">Please Select a Minimum Dollar Range</span>
                        </div>
                    </div>
                    to
                    <div class="input-group">
                        <span class="input-group-addon" id="maxRangeLabel">Maximum</span>
                        <select style="width: 182px;"
                            data-ng-model="newMaxRange"
                            id="newMaxRange"
                            name="newMaxRange"
                            data-ng-options="max.value as max.name for max in highRange"
                            class="form-control"
                            required>
                        </select>
                        <div>
                            <span data-ng-show="changeRange.newMaxRange.$error.required" class="text-danger">Please Select a Maximum Dollar Range</span>
                        </div>
                    </div>
                    <div data-ng-show="showMinMaxerror" class="alert alert-danger push-down">
                        {{minMaxError}}
                    </div>
                    <div data-ng-show="showEmptyError" class="alert alert-danger push-down">
                        {{selectMinError}}
                        {{selectMaxError}}
                    </div>
                    <div class="modal-footer">
                        <input class="btn btn-primary" data-ng-click="rangeChanged()" data-ng-disabled="checkFormRange()" type="submit" value="Change">
                        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Change Dollar Range Modal Form Completion -->

Open in new window

0
Comment
Question by:brianmfalls
[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
  • 5
6 Comments
 
LVL 1

Author Comment

by:brianmfalls
ID: 41762947
Here's a visual progression.  Pretty simple stuff.  :)

Form Progression
0
 
LVL 1

Author Comment

by:brianmfalls
ID: 41763002
More info:

This wasn't an issue until I added 'as min/max.name' to the data-ng-options attribute.  Adding 'as min/max.name' to the data-ng-options attribute simply ensures that the stored value is selected when the form is pulled up.

Clearly this problem could be solved by removing the addition to the data-ng-options attribute, but I need to have my cake and eat it too in this case.  ;)
0
 
LVL 1

Author Comment

by:brianmfalls
ID: 41763063
Going to be offline for the weekend.  I'll respond when I return.  :)
0
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
LVL 58

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41763161
How are you storing the underlying data - there are issues with selects that have to do with the indexing of objects see here https://docs.angularjs.org/api/ng/directive/ngOptions

Specifically look at the track by clause
0
 
LVL 1

Author Comment

by:brianmfalls
ID: 41767572
I tried everything I could, in every way I could, including the track by clause.  Nothing.  I ended up taking AngularJS out of the equation.  They need to get their stuff strait with regard to selects...
0
 
LVL 1

Author Closing Comment

by:brianmfalls
ID: 41767576
Thanks anyway
0

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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

630 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