AngularJS – option supplémentaire en blanc ajoutée en utilisant ng-repeat dans l'étiquette de sélection

J'ai une liste que je crée avec une sélection, en utilisant AngularJS ng-repeat. La liste est créée correctement, et lorsque je sélectionne l'un des éléments et que je 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 boîte de liste est imprimée, il y a un élément en haut qui est vide. Lorsque je vérifie la 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 la ng-repeat. Je ne veux pas voir un 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érerais que les éléments sélectionnés ne commencent.

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

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

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

Le moyen le plus simple de s'assurer que l'option ajoutée automatiquement par angulaire est caché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>

J'ai trouvé la solution après un long RND. Trouvez le code suivant qu'il 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); });

});