Eliminar la opción en blanco de la opción Seleccionar con AngularJS

80

Soy nuevo en AngularJS. Busqué mucho, pero no resuelve mi problema.

Recibo una opción en blanco por primera vez en el cuadro de selección.

Aquí está mi código HTML

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config">
            <option ng-repeat="template in configs">{{template.name}}</option>
        </select>
    </div>
</div>

JS

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
    $scope.feed = {};

      //Configuration
      $scope.configs = [
                                 {'name': 'Config 1',
                                  'value': 'config1'},
                                 {'name': 'Config 2',
                                  'value': 'config2'},
                                 {'name': 'Config 3',
                                  'value': 'config3'}
                               ];
      //Setting first option as selected in configuration select
      $scope.feed.config = $scope.configs[0].value;
});

Pero no parece funcionar. ¿Cómo puedo solucionar esto? Aquí está la demostración de JSFiddle

iCode
fuente

Respuestas:

95

Como referencia: ¿Por qué angularjs incluye una opción vacía en seleccionar ?

El vacío optionse genera cuando un valor al que se ng-modelhace referencia no existe en un conjunto de opciones pasadas a ng-options. Esto sucede para evitar la selección accidental del modelo: AngularJS puede ver que el modelo inicial no está definido o no está en el conjunto de opciones y no quiere decidir el valor del modelo por sí solo.

En resumen: la opción vacía significa que no se selecciona ningún modelo válido (por válido quiero decir: del conjunto de opciones). Debe seleccionar un valor de modelo válido para deshacerse de esta opción vacía.

Cambia tu código así

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
  $scope.feed = {};

  //Configuration
  $scope.feed.configs = [
    {'name': 'Config 1',
     'value': 'config1'},
    {'name': 'Config 2',
     'value': 'config2'},
    {'name': 'Config 3',
     'value': 'config3'}
  ];
  //Setting first option as selected in configuration select
  $scope.feed.config = $scope.feed.configs[0].value;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="MyApp1">
  <div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
    <!-- <select ng-model="feed.config">
<option ng-repeat="template in configs">{{template.name}}</option>
</select> -->
    <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
    </select>
  </div>
</div>

Trabajo de demostración de JSFiddle

ACTUALIZACIÓN (31 de diciembre de 2015)

Si no desea establecer un valor predeterminado y desea eliminar la opción en blanco,

<select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
      <option value="" selected="selected">Choose</option>
</select>

Y en JS no es necesario inicializar el valor.

$scope.feed.config = $scope.feed.configs[0].value;

Shiju K Babu
fuente
2
una explicación realmente ayudaría
jeremy
3
¿Por qué es necesario pasar configsde $scopea $scope.feed?
Piotr Dobrogost
Entonces ... ¿qué significa cuando tengo un valor válido y todavía me da una línea en blanco en lugar de usar esa opción? modelo - 0, opciones 0, 50, 100 - seleccione comienza en línea en blanco
TiggerToo
56

Si bien todas las sugerencias anteriores funcionan, a veces necesito tener una selección vacía (que muestre el texto del marcador de posición) cuando ingrese inicialmente a mi pantalla. Entonces, para evitar que el cuadro de selección agregue esta selección vacía al principio (o, a veces, al final) de mi lista, estoy usando este truco:

código HTML

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs" placeholder="Config">
            <option value="" selected hidden />
        </select>
    </div>
</div>

Ahora que ha definido esta opción vacía, el cuadro de selección está contento, pero lo mantiene oculto.

RojoSparkle
fuente
4
+1 para la única respuesta que no inicializa el modelo a la primera opción de la lista. Mi extraña implementación necesitaba que la lista de selección comenzara en blanco pero no incluyera la opción en blanco cuando se hace clic en la lista de selección. Esta es la única solución que funcionó para mí. ¡Gracias!
Billy McKee
21

Aquí hay un violín actualizado: http://jsfiddle.net/UKySp/

Necesitaba establecer el valor de su modelo inicial en el objeto real:

$scope.feed.config = $scope.configs[0];

Y actualice su selección para que se vea así:

<select ng-model="feed.config" ng-options="item.name for item in configs">
Adam Putinski
fuente
4

Hay varias formas como:

<select ng-init="feed.config = options[0]" ng-model="feed.config"
        ng-options="template.value as template.name for template in feed.configs">
</select>

O

$scope.feed.config = $scope.configs[0].name;
Bhalchandra K
fuente
3

Es una especie de solución, pero funciona de maravilla. Solo agrega <option value="" style="display: none"></option>como relleno. Como en:

<select size="4" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
       <option value="" style="display: none"></option>
</select>
Himanshu Arora
fuente
1
esto no oculta la opción predeterminada en IE, supongo
Rathma
1
no lo he probado específicamente en IE
Himanshu Arora
3

Si solo desea eliminar el espacio en blanco, use ng-show y ¡listo! No es necesario inicializar el valor en JS.

<select ng-model="SelectedStatus" ng-options="x.caption for x in statusList">
    <option value="" ng-show="false"></option>
</select>`
Palash
fuente
2

Cambie su código de esta manera. Te olvidas de la opción value inside. Antes de asignar el ng-model. Debe tener un valor. Solo entonces no obtiene el valor indefinido.

<div ng-app="MyApp1">
<div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
     <select ng-model="feed">
        <option ng-repeat="template in configs" value="template.value">{{template.name}}    
 </option>
    </select>
    </div>
 </div>

JS

 var MyApp=angular.module('MyApp1',[])
 MyApp.controller('MyController',function($scope) {  
      $scope.feed = 'config1';      
      $scope.configs = [
         {'name': 'Config 1', 'value': 'config1'},
         {'name': 'Config 2', 'value': 'config2'},
         {'name': 'Config 3', 'value': 'config3'}
      ];
 });
Anbu
fuente
1

Utilice ng-value en lugar de value .

$scope.allRecs = [{"text":"hello"},{"text":"bye"}];
$scope.X = 0;

y luego en el archivo html debería ser como:

<select ng-model="X">  
     <option ng-repeat="oneRec in allRecs track by $index" ng-value="$index">{{oneRec.text}}</option>
</select>
Farzad.Kamali
fuente
0

Para mí, la respuesta a esta pregunta fue usar <option value="" selected hidden />como lo propuso @RedSparkle más agregar ng-if="false"para trabajar en IE.

Entonces, mi opción completa es (tiene diferencias con lo que escribí antes, pero esto no importa debido a ng-if):

<option value="" ng-if="false" disabled hidden></option>

Vladimir Mironov
fuente
0

Finalmente funcionó para mí.

<select ng-init="mybasketModel = basket[0]" ng-model="mybasketModel">
        <option ng-repeat="item in basket" ng-selected="$first">{{item}}</option>
</select>


Kabiraj Kharel
fuente
-1

También verifique si tiene algún valor falso o no. Angularjs insertará una opción vacía si tiene un valor falso. Luché durante 2 días solo por un valor falso. Espero que sea de ayuda para alguien.

Tenía opciones como [0, 1] e inicialmente establecí el modelo en 0 debido a que se insertó una opción vacía. La solución alternativa para esto fue ["0", "1"].

Deepchand yadav
fuente