AngularJS - добавлен дополнительный пустой параметр с использованием ng-repeat в теге select

У меня есть список, который я создаю с помощью select, используя AngularJS ng-repeat. Список будет создан правильно, и когда я выберу один из элементов и нажму кнопку, я перейду к функции и буду иметь нужную информацию.

Мой код html выглядит следующим образом:

<select size="6" ng-model="item" ng-options="s.name for s in itemlist"></select>
<button class="btn tt-btn-blue" ng-model="singleModel" ng-click="onLoadClicked(item.id)">Load</button>

Моя проблема заключается в том, что при рисовании списка отображается один элемент в верхней части, который пуст. Когда я проверяю список во время выполнения в Chrome, я получаю следующий вывод в консоли:

<select size="6" ng-model="item" ng-options="s.name for s in itemlist" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
<option value="3">Item 4</option>
<option value="4">Item 5</option>
<option value="5">Item 6</option>
</select>

Мне интересно, как я могу избавиться от первого варианта, вставленного ng-repeat. Я не хочу видеть пустое место в верхней части списка. Я понимаю, что одним из вариантов было бы установить первый фактический параметр (value = "0" ) в качестве выбранного элемента, но я бы предпочел, чтобы не было выбранных элементов для запуска.

Ответы

Ответ 1

Всякий раз, когда вы видите <option value="?" selected="selected"></option> в выборе, это означает, что ваш ng-model установлен в значение, которое не находится в ng-options. Итак, если вы не хотите пустую опцию, вам нужно убедиться, что item установлено в значение itemlist. Это может быть так же просто, как наличие следующего в вашем контроллере:

$scope.item = $scope.itemlist[0];

Это даст ему фактическое значение, а затем angular обновит его для вас после этого.

Ответ 2

Простейший способ убедиться, что автоматически добавленная опция angular скрыта, - это директива ng-if.

<select ng-options="option.id as option.description for option in Options">
    <option value="" ng-if="false"></option>
</select>

Ответ 3

Я нашел решение после длинного RND Пожалуйста, найдите следующий код, который будет работать для вас.

Вот код HTML

<div class="col-xs-3" ng-controller="GetUserADDetails">
            <label>Region</label>
                <select id="DDLRegion" ng-model="selectedregion" class="form-control" ng-change="getBranched(selectedregion)">   
                                <option value="" >--Select Region--</option>                                 
                                <option ng-repeat="region in Regions" value="{{region.LookupID}}">{{region.LookupValue}}</option>
                  </select>
 </div>

Вот код модуля

var app = angular.module("UserMasterModel", [])
        .controller("GetUserADDetails", function ($scope, $http,$log) {
         $http({
                method: 'GET',
                url: '/UserMaster/GetAllRegion'
            })
            .then(function (response) {
                $scope.Regions = response.data;                        
                //$log.info(response);
            });

});