On option select angularJS not working

Question

Scenario - Following is my HTML code for select box which on selecting Every Day option suppose to open a div with Everyday selected and select day select option starting from 2.

Problem - Though the div is opening correctly but Every Day option is not pre selected and day select drop down is also not starting from 2 like I believe it should.

Let me know what I am doing wrong here.

HTML Code -

<div>
    <select
        id="repeatval"
        ng-model="event.repeat"
        ng-options="repeat.value as repeat.name for repeat in repeats"
        ng-init="event.repeat = event.repeat || repeats[0].value"
        class="btn">
    </select>
</div>
<div ng-if="event.repeat === 2">
    <input type="radio" name="everyday" ng-model="event.everyday" value="forever" ng-checked="true" /> Everyday
    <input type="radio" name="everyday" ng-model="event.everyday" value="dayselval" />
    Select <select
            id="selday"
            ng-model="event.selday"
            ng-options="day.value as day.name for day in days"
            ng-init="event.day = event.day || days[0].value"
            class="btn">
           </select> Day
    <input type="radio" name="everyday" ng-model="event.everyday" value="pickdate" /> Pick a date
</div>

Plnkr - PLNKR DEMO

EDIT -

Ad per Vamsi comment- I solved the selection problem by applying -

ng-init="event.selday = event.day || days[0].value"

Changed event.day to event.selday

event.selday is not initialized, that's why it is not showing — Vamsi
– Vamsi, Commented Aug 20, 2014 at 7:17
You should also initialize the event object: $scope.event = { repeat: 2 }; — Karlen Kishmiryan
– Karlen Kishmiryan, Commented Aug 20, 2014 at 7:25
@KarlenKishmiryan Your code is making "Every Day" selected by default — Trialcoder
– Trialcoder, Commented Aug 20, 2014 at 7:40

Avag Sargsyan · Accepted Answer · 2016-10-26 09:11:49Z

2

If you want make input radio pre selected you can set ng-value="forever"

For selecting the option you must set the ng-model value, in your case the value is not selected and you can do this with ng-init like this:

 Select <select
                id="selday"
                ng-init="event.selday = 2"
                ng-model="event.selday"
                ng-options="day.value as day.name for day in days"
                ng-init="event.day = event.day || days[0].value"
                class="btn">
               </select> Day

edited Oct 26, 2016 at 9:11

Avag Sargsyan

2,5194 gold badges33 silver badges45 bronze badges

answered Aug 20, 2014 at 7:29

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

On option select angularJS not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related