Поле выбора HTML не выбирает первое значение по умолчанию

Я использую angular js и HTML для создания базового веб-сайта, и у меня есть раскрывающееся меню с 3 параметрами, по какой-то причине первое значение в поле параметра не выбрано по умолчанию. HTML-страница в браузере показывает пустую опцию (хотя у меня нет пустой опции в моем списке выбора);

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>

I tried adding the following command to my angular:

$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);
        });
    };
});

enter image description here


person BATMAN_2008    schedule 09.06.2020    source источник


Ответы (2)


Вы можете установить значение по умолчанию модели formAdata.eventtype2 в контроллере как желаемое значение по умолчанию.

e.g.

вы можете иметь это в своем контроллере

$scope.formAdata.eventtype2 = 'ordinaryevent';

или любое другое значение, которое у вас есть в первом варианте


Для второй проблемы попробуйте это

<div class="col-md-4" ng-if="eventType">
    <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>
app.controller('AppController', function($scope, $http) {
$scope.formAdata = {
    eventtype1: '',
    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);
    });
};

$scope.init();
person morgan9999    schedule 09.06.2020
comment
Спасибо, это отлично работает: $scope.formAdata.eventtype2 = 'ordinaryevent'; - person BATMAN_2008; 09.06.2020
comment
Но это влияет на мой другой выпадающий список, который заполняется с помощью angularjs и списка, который я получаю из модели nodejs. Ранее другое раскрывающееся меню заполнялось значениями правильно, но после добавления этой команды ни одно из раскрывающихся полей не заполнялось, оно просто показывает {{ variable name }} - person BATMAN_2008; 09.06.2020
comment
не уверен, что вы имеете в виду, если честно, вы можете подробнее? что работало раньше и как это сломалось? - person morgan9999; 09.06.2020
comment
В основном у меня есть 2 раскрывающихся списка с типом события1 и типом события2. eventtype2 заполняется непосредственно в HTML с параметром, но список eventtype1 довольно огромен, поэтому я сохранил параметры в модели nodejs и вызываю функцию nodejs в angular для его заполнения. Перед добавлением предоставленной вами команды тип события1 работал нормально, но тип события2 не выбирал первое значение, но после добавления вашей команды тип события2 работает нормально, но тип события1 по какой-то причине перепутался и теперь не заполняется. Я добавлю код к моему основному вопросу. - person BATMAN_2008; 09.06.2020
comment
Я до сих пор не уверен, откуда взялся eventtype1, поскольку его нигде нет в вашем фрагменте. Но я подозреваю, что вам просто нужно изменить $scope.formAdata.eventtype2 = 'ordinaryevent'; на $scope.formAdata = {eventtype1: '', eventtype2: 'ordinaryevent'}, вероятно - person morgan9999; 09.06.2020
comment
Я разместил полный код в своем основном вопросе. Пожалуйста, взгляните на это. Первоначально меня беспокоил только тип события2, поэтому я не упомянул о типе события1, но после модификации типа события2, поскольку он искажает тип события1, я также включил его. Я попробовал код $scope.formAdata = {eventtype1: '', eventtype2: 'ordinaryevent'}, и он, похоже, не решает проблему, связанную с eventtpye1, хотя решает проблему с eventtpye2. - person BATMAN_2008; 09.06.2020
comment
Хорошо, поэтому я не уверен, почему ваш код вообще работает, поскольку эта дополнительная строка вообще не должна влиять на $scope.eventType. Насколько я понимаю, $scope.init никогда не срабатывает, поэтому вам нужно добавить $scope.init() после объявления $scope.init. Если это все еще не работает, вам может потребоваться скрыть дом до тех пор, пока запрос не будет выполнен, т.е. добавить ng-if="eventType в <select id="eventtype1"... - person morgan9999; 09.06.2020
comment
Вы правы, если я добавлю $scope.formAdata.eventtype2 = 'ordinaryevent';, то $scope.init() функция не будет вызываться. Я не понял решение, которое вы упомянули add $scope.init() after your $scope.init has been declared, вы имеете в виду добавить команду $scope.init(); после завершения функции, если да, то я попробовал это, но безуспешно. Это кажется таким простым, но не уверен, почему я застрял здесь. - person BATMAN_2008; 09.06.2020

Вы должны добавить «выбранные» в параметры по умолчанию

<option value="xx" selected>...
person David 'mArm' Ansermot    schedule 09.06.2020
comment
Я пробовал это, и, похоже, это не работает для меня. Хотя при начальной загрузке отображаются параметры, они сразу же исчезают, я не уверен, почему и как параметры исчезают. Если я нажму на поле, я увижу опцию, но я надеюсь, что первая опция должна быть выбрана по умолчанию. - person BATMAN_2008; 09.06.2020