在选择框中选择默认选项- AngularJs

使用angularJs选择默认值的最简单方法是什么?

我有这个控件:

    <div class="col-md-1">
        <label for="timeZone">Time zone</label>
        <select id="timeZone" name="timeZone" class="form-control"
            ng-model="newTestSessionCtrl.formData.timeZoneValues"
            ng-options="timeZone.name for timeZone in newTestSessionCtrl.viewData.timeZoneValues">
            <option value="" disabled selected>Select</option>
        </select>
    </div>

在我的控制器中我定义了这样的timezonevalvalues

timeZoneValues: [{value: "UTC", name: "UTC"}, {value: "UTC+1", name:"UTC+1"}]

我想做的是使用ng-init。就像这里解释的那样，但我想我做错了什么。

我想做的是选择UTC默认值

这是工作吗?

<div class="col-md-1">
    <label for="timeZone">Time zone</label>
    <select id="timeZone" name="timeZone" class="form-control"
        ng-model="newTestSessionCtrl.formData.timeZoneValues"
        ng-init="newTestSessionCtrl.formData.timeZoneValues = timeZone[0]"
        ng-options="timeZone.name for timeZone in newTestSessionCtrl.viewData.timeZoneValues">
        <option value="" disabled selected>Select</option>
    </select>
</div>

将控制器中的默认值赋给ng-model:

timeZoneValues: [{value: "UTC", name: "UTC"}, {value: "UTC+1", name:"UTC+1"}];
newTestSessionCtrl.formData.timeZoneValues = "UTC";

newSessionCtrl需要是你用来从控制器引用控制器本身的任何东西，如果不是，则需要是作用域。

也可以使用:

<div class="col-md-1">
    <label for="timeZone">Time zone</label>
    <select id="timeZone" name="timeZone" class="form-control"
        ng-model="newTestSessionCtrl.formData.timeZoneValues"
        ng-options="timeZone.name for timeZone in newTestSessionCtrl.viewData.timeZoneValues"
        ng-init="newTestSessionCtrl.formData.timeZoneValues = newTestSessionCtrl.viewData.timeZoneValues[0].name">
    </select>
</div>

删除空选项:

<div class="col-md-1">
    <label for="timeZone">Time zone</label>
    <select id="timeZone" name="timeZone" class="form-control"
        ng-model="selected"
        ng-options="timeZone as timeZone.name for timeZone in newTestSessionCtrl.viewData.timeZoneValues">
    </select>
</div>

并在javascript上添加

$scope.selected = timeZoneValues[0].name;

我有同样的问题，我是这样解决的:

下面是html代码:

<div class="col-md-1">
    <label for="timeZone">Time zone</label>
    <select ng-model="defaultValue" ng-options="timeZone.name for timeZone in newTestSessionCtrl.viewData.timeZoneValues" ></select>
</div>

在控制器中，我将默认值设置为数组的第一个值:

$scope.defaultValue = $scope.timeZoneValues[0].name;

希望能有所帮助

您错过了在选择标签中在ng-init指令中分配值。请看下面的工作规划

http://plnkr.co/edit/SBrSUjrfWHJvkufVjSJG?p =

预览HTML:

 <body ng-controller="MainCtrl">
    <div class="col-md-1">
        <label for="timeZone">Time zone</label>
        <select id="timeZone" name="timeZone" class="form-control" ng-init="timeZoneModel = timeZoneValues[0]"
            ng-model="timeZoneModel"
            ng-options="timeZone.name for timeZone in timeZoneValues">
            <option value="" disabled selected>Select</option>
        </select>
    </div>
  </body>

JS:

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.timeZoneValues = [{value: "UTC", name: "UTC"}, {value: "UTC+1", name:"UTC+1"}];
});

相关内容

最新更新

热门标签：