web-dev-qa-db-fra.com

AngularJS - option supplémentaire vierge ajoutée en utilisant ng-repeat dans la balise select

J'ai une zone de liste que je crée avec une sélection, en utilisant AngularJS ng-repeat. La zone de liste est créée correctement et lorsque je sélectionne l'un des éléments et clique sur mon bouton, j'arrive à la fonction et j'ai les informations dont j'ai besoin.

Mon code html est le suivant:

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

Mon problème est que lorsque la zone de liste peint, elle a un élément en haut qui est vide. Lorsque j'inspecte la zone de liste lors d'une exécution dans Chrome, j'obtiens la sortie suivante dans la console:

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

Je me demande comment je peux me débarrasser de la première option insérée par le ng-repeat. Je ne veux pas voir d'espace vide en haut de la liste. Je me rends compte qu'une option serait de définir la première option réelle (valeur = "0") comme élément sélectionné, mais je préfère n'avoir aucun élément sélectionné pour commencer.

javascriptselectangularjs
47
bmahf

Chaque fois que vous voyez <option value="?" selected="selected"></option> dans la sélection, cela signifie que votre ng-model est défini sur une valeur qui n'est pas dans le ng-options. Donc, si vous ne voulez pas l'option vide, vous devez vous assurer que item est défini sur une valeur dans votre itemlist. Cela pourrait être aussi simple que d'avoir les éléments suivants dans votre contrôleur:

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

Cela lui donnera une valeur initiale, puis angular le mettra à jour pour vous par la suite.

77
dnc253

moyen le plus simple de s'assurer que l'option ajoutée automatiquement par angular est masquée est la directive ng-if.

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

J'ai trouvé la solution après un long RND Veuillez trouver le code suivant qui fonctionnera pour vous.

Voici le code 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>

Voici le code du module

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

});

1
Sapnandu