CODEWITHSUNDEEP
javascripthtmlangularjsselection
Trialcoder
Trialcoder

Reputation: 6014

On option select angularJS not working

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

Upvotes: 1

Views: 86

Answers (1)

Narek Mamikonyan
Narek Mamikonyan

Reputation: 4611

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

Upvotes: 2

Related Questions