javascript - llenar - AngularJS: opción extra en blanco añadida usando ng-repeat en la etiqueta de selección

select dinamico angular

Question

Tengo un listbox que estoy creando con una selección, usando AngularJS ng-repeat. El cuadro de lista se crea correctamente, y cuando selecciono uno de los elementos y hago clic en mi botón, llego a la función y tengo la información que necesito.

Mi código html es el siguiente:

<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>

Mi problema es que cuando el cuadro de lista pinta, tiene un elemento en la parte superior que está en blanco. Cuando inspecciono el listbox durante una ejecución en Chrome, obtengo el siguiente resultado en la consola:

<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>

Me pregunto cómo puedo deshacerme de la primera opción insertada por ng-repeat. No quiero ver un espacio en blanco en la parte superior del cuadro de lista. Me doy cuenta de que una opción sería establecer la primera opción real (valor = "0") como el elemento seleccionado, pero preferiría no tener elementos seleccionados para comenzar.

Answer 1

Cada vez que vea <option value="?" selected="selected"></option> <option value="?" selected="selected"></option> en la selección, significa que su ng-model está establecido en un valor que no está en las ng-options . Por lo tanto, si no desea la opción en blanco, debe asegurarse de que el item esté configurado en un valor en su itemlist . Esto podría ser tan fácil como tener lo siguiente en tu controlador:

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

Esto le dará un valor inicial, y luego angular lo actualizará para usted a partir de entonces.

Answer 2

He encontrado la solución después de una larga RND. Encuentra el siguiente código que funcionará para ti.

Aquí está el código 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>

Aquí está el Código del Módulo

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

});

Answer 3

La forma más simple de asegurarse de que la opción agregada automáticamente por angular esté oculta es la directiva ng-if.

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