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
55 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
Comment Utility
Here's a visual progression.  Pretty simple stuff.  :)

Form Progression
0
 
LVL 1

Author Comment

by:brianmfalls
Comment Utility
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
Comment Utility
Going to be offline for the weekend.  I'll respond when I return.  :)
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks anyway
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…

772 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

9 Experts available now in Live!

Get 1:1 Help Now