HTML选择字段默认不选择第一个值

Question

我正在使用angular js和HTML创建一些基本网站，并且由于某些原因，我有一个带有3个选项的下拉菜单，默认情况下未选择option字段中的第一个值。浏览器上的HTML页面显示空白选项（即使我的选择列表中没有空白选项）；

浏览器上的HTML：

HTML代码：

<div class="col-md-4">
    <select id="eventtype2" ng-model="formAdata.eventtype2" class="form-control">
        <option class="dropdown-item" value="ordinaryevent">Ordinary Event</option>
        <option class="dropdown-item" value="errordeclaration"> Error Declaration </option>
    </select>
</div>

我的要求是在页面加载时的字段中选择第一个选项Ordinary Event。我尝试了选项selected，但还是没有运气。在页面加载几分之一秒后，该字段显示值Ordinary Event，但此值消失了。我不是想将其隐藏在有角的位置或不确定原因的位置。

我也尝试过以下方法，但没有运气：

<div class="col-md-4">
<select id="eventtype2" ng-model="formAdata.eventtype2" class="form-control">
    <option class="dropdown-item" value="ordinaryevent" selected>Ordinary Event</option>
    <option class="dropdown-item" value="errordeclaration"> Error Declaration </option>
</select>

我尝试将以下命令添加到我的角度文件中：

$scope.formAdata.eventtype2 = 'ordinaryevent';

但是由于某种原因添加了此命令后，从node.js填充的其他其他下拉列表却被弄乱了：

<div class="row">
<div class="col-md-12 form-group">
    <label for="eventtype1" class="col-md-3 control-label">Event Type</label>
    <div class="col-md-4">
        <select id="eventtype1" ng-model="formAdata.eventtype1" class="form-control" ng-options='eventtype1 for eventtype1 in eventType'>
            <option class="dropdown-item" value="" disabled selected>Select Event Type</option>
            <option class="dropdown-item" value="{{eventtype1}}"> {{ eventtype1 }} </option>
        </select>
    </div>
    <div class="col-md-4">
        <select id="eventtype2" ng-model="formAdata.eventtype2" class="form-control">
            <option class="dropdown-item" value="ordinaryevent" selected>Ordinary Event</option>
            <option class="dropdown-item" value="errordeclaration"> Error Declaration </option>
        </select>
    </div>
</div>

    app.controller('AppController', function($scope, $http) {
    $scope.formAdata.eventtype2 = 'ordinaryevent';

    $scope.createEvents =   function(){
        $http({
            url: "/createEvents",
            method: "POST",
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data: $.param($scope.formAdata)
        }).success(function(response) {
            $scope.xmldata  =   response[0].XML;
            $scope.jsondata =   JSON.stringify(JSON.parse(response[1].JSON), undefined, 4);
        }).error(function(error) {
            console.log(error)
        });
    }

    $scope.init = function () {
        $http({
            url: "/populateFields",
            method: "GET"
        }).success(function(response) {
            $scope.businessSteps    =   response.businessStep;
            $scope.eventType        =   response.eventType; 
        }).error(function(error) {
            console.log(error);
        });
    };
});

Answer 1

您可以在控制器中将formAdata.eventtype2模型的默认值设置为所需的默认值

例如

您可以在控制器中拥有它

$scope.formAdata.eventtype2 = 'ordinaryevent';

或您在第一个选项上具有的任何值

Answer 2

您必须在默认选项中添加“选定”

<option value="xx" selected>...