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
62 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
  • 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 52

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
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…

910 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

24 Experts available now in Live!

Get 1:1 Help Now