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

x
?
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
Medium Priority
?
108 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
Containers & Docker to Create a Powerful Team

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

 
LVL 59

Accepted Solution

by:
Julian Hansen earned 2000 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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

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…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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

722 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