AngularJS选择初始值不选择

时间:2015-01-27 00:54:11

标签: javascript angularjs

我使用带有以下数据和范围代码的HTML选择(如下所示)。我无法从范围数据的“选择”列表中选择初始值。有人能指出我搞砸了什么吗?

   $scope.hourOptions = [
            { value:'0',  key: '12AM'},
            { value:'3600',  key: '1AM'},
            { value:'7200',  key: '2AM'},
            { value:'10800',  key: '3AM'},
            { value:'14400',  key: '4AM'},
            { value:'18000',  key: '5AM'},
            { value:'21600',  key: '6AM'},
            { value:'25200',  key: '7AM'},
            { value:'28800',  key: '8AM'},
            { value:'32400',  key: '9AM'},
            { value:'36000', key: '10AM'},
            { value:'39600', key: '11AM'},
            { value:'43200', key: '12AM'},
            { value:'46800', key: '1PM'},
            { value:'50400', key: '2PM'},
            { value:'54000', key: '3PM'},
            { value:'57600', key: '4PM'},
            { value:'61200', key: '5PM'},
            { value:'64800', key: '6PM'},
            { value:'68400', key: '7PM'},
            { value:'72000', key: '8PM'},
            { value:'75600', key: '9PM'},
            { value:'79200', key: '10PM'},
            { value:'82800', key: '11PM'}
        ];

这是视图

<select id="timeOfDay" class="form-control"
        data-ng-options="option.value as option.key for option in hourOptions"
        data-ng-model="topic.timeOfDay"
        required
        ></select>

$ scope.topic值设置为72000:

$scope.topic.timeOfDay = 72000;

我已尝试将其更改为data-ng-init中的字符串,但无济于事。无论我做什么,我都无法在选择列表中选择自己的初始值。有任何想法吗?

1 个答案:

答案 0 :(得分:5)

由于option.value是数值的字符串表示,因此您必须将ng-model值提供为字符串。并在控制器中初始化它,而不是使用ng-init进行初始化(虽然它不会导致问题,但只是使用它来初始化这样不是一个好的模式)

尝试:

$scope.timeOfDay = '72000';

可能你的意思是将ng-model设置为data-ng-model="timeOfDay"或反之亦然。

<强> Plnkr