在AngularJs中设置动态填充下拉列表的默认值

时间:2016-11-08 14:17:33

标签: javascript jquery angularjs

当使用动态生成的数据填充下拉列表时,是否有一种简单的方法可以选择默认值?

我的下拉数据包含了几小时的值(实际上每15分钟:......,09:15,09:30,9:45,10:00,10:15 ......)

我想要做的是默认选择页面加载值12:00(中午)。

我知道有一种方法可以通过给出价值指数来做到这一点,但我想探索是否有更好的方法可以做到这一点?

这是我的下拉:

<div class="col-md-2" ng-class="{ 'has-error has-feedback': addNewTestSession.sessionStartTime.$touched && addNewTestSession.sessionStartTime.$invalid }">
    <label for="sessionStartTime">Session Start Time<span class="mandatory">*</span></label>
    <select id="sessionStartTime" name="sessionStartTime" class="form-control" 
        ng-model="newTestSessionCtrl.formData.sessionTime"
        ng-options="time for time in newTestSessionCtrl.viewData.sessionStarTimeIntervals"
        ng-required="true">
        <option value="" disabled selected>Select</option>
    </select>
    <span ng-show="addNewTestSession.sessionStartTime.$touched && addNewTestSession.sessionStartTime.$invalid" 
        class="fa fa-warning form-control-feedback"
        uib-popover="This field is required." 
        popover-trigger="'mouseenter'"
        popover-placement="auto right"
        popover-class="additional-info"></span>             
</div>

此功能将为其生成数据:

sessionStarTimeIntervals: this.generateTimeIntervalArray(15)

generateTimeIntervalArray(minutes) {
    let retVal = [];
    let hour = 0;
    let minute = 0;
    let whileTest = true;

    function addZeroIfOneDigitvalue(value) {
        if ((value + "").length === 1) {
            value = "0" + value;
        }

        return value;
    }

    while (whileTest) {
        if (hour === 24) {
            break;
        }

        retVal.push(addZeroIfOneDigitvalue(hour) + ":" + addZeroIfOneDigitvalue(minute));

        minute += minutes;
        if (minute >= 60) {
            minute = minute - 60;
            hour++;
        }
    }

    return retVal;
}

每次加载页面时选择12:00的最佳方法和方法是什么?

1 个答案:

答案 0 :(得分:2)

您可以预先选择填充模型变量的值作为您的选择输入。

在$ scope设置期间或代码的某些部分填充newTestSessionCtrl.formData时:

newTestSessionCtrl.formData.sessionTime='12:00';

在HTML for SELECT

ng-init="newTestSessionCtrl.formData.sessionTime='12:00'"
ng-model="newTestSessionCtrl.formData.sessionTime"