populate dropdown selects in angularjs

Question

Im developing my app and I want the dropdown value to have the same value as of the selected date in the datepicker automatically. Im using angularjs and I can't find enough source that can specifically answer my problem tho..thank you

here is a bit of the code. My whole code is on plunker

    script type="text/ng-template" id="custom-datepicker.html">
    <div class="form-inline enhanced-datepicker">
        <label>
            <input
                type="text"
                id="{{id}}"
                name="{{name}}"
                ng-model="ngModel"
                datepicker-popup="{{popup}}"
                datepicker-options="{{options}}"
                date-disabled="{{dateDisabled}}"
                min="{{min}}"
                max="{{max}}"
                open="opened"
                ng-pattern="/^(?:[1-9]|1\d|2\d|3[0-1]) (?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec) (?:1|2)(?:\d{3})$/gim"/>

        <span class="input-group-btn">
                <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>

        </label>
    </div>
                </script>
      <script>

  angular
    .module('App',['ui.bootstrap'])
    .directive('customDatepicker',function($compile,$timeout){
        return {
            replace:true,
            templateUrl:'custom-datepicker.html',
            scope: {
                ngModel: '=',
                dateOptions: '@',
                dateDisabled: '@',
                opened: '=',
                min: '@',
                max: '@',
                popup: '@',
                options: '@',
                name: '@',
                id: '@'
            },
            link: function($scope, $element, $attrs, $controller){

            }    
        };
    })

here is the plunker link: http://plnkr.co/edit/4XRjszIATgvUVrofgRFI?p=preview

min che · Accepted Answer · 2015-12-19 10:09:14Z

1

From what I see your plunker is now working, but not properly, since for example in the month dropdown, a new value will be added, so you'll have two Dec values, and the day dropdown is not clickable. The question is, do you need them to be clickable, and if so, should the datepicker date update on the dropdowns change? I would try binding the selects to a scope variable that would get parsed into proper day, month and year values on datepicker change. I wanted to show you in your plunker, but with everything in the html file, sorry...

answered Dec 19, 2015 at 10:09

min che

1581 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bleyk Over a year ago

Yes @min che that's what I want but I don't have any idea how can I bind the values. I'm new in angular and still does not have enough knowledge on using it

min che Over a year ago

Well, I would add scope variables for the day, month and year dropdowns, and a function that will form a date value from those dropdowns and update the datepicker. In html, that function would be added to each select as an ng-change attribute. Then, I would add a second function that would parse the date value into separate day, month and year values, and assign them to the aforementioned scope values. Again, it would be called in the ng-change attribute, but of the datepicker. Please let me know if further explanation is needed.

min che Over a year ago

Just to point out a possible infinite loop if one should update the second, and the second should update the first one.

Nichole Boseman · Accepted Answer · 2015-12-19 02:19:39Z

1

Have you looked into using ng-change when you select the date to call a function to update the date fields?

answered Dec 19, 2015 at 2:19

Nichole Boseman

572 bronze badges

1 Comment

bleyk Over a year ago

Yes, but I dont know where should I place the ng-change and the attributes i should call :( @Nichole Boseman

Collectives™ on Stack Overflow

populate dropdown selects in angularjs

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related