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

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

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

Aquí está mi código HTML

{{template.name}}

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 parece que no funciona. ¿Cómo puedo resolver esto? Aquí está JSFiddle Demo

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

La option vacía se genera cuando un valor referenciado por ng-model 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 en el conjunto de opciones y no desea decidir el valor del modelo por sí mismo.

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

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 en mi pantalla. Entonces, para evitar que la casilla de selección agregue esta selección vacía al principio (o algunas veces al final) de mi lista, estoy usando este truco:

código HTML

 

Ahora ha definido esta opción vacía, por lo que la casilla de selección es feliz, pero la mantiene oculta.

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

Necesitabas establecer tu valor de modelo inicial para el objeto real:

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

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

  

Otro método para resolver es haciendo uso de: $first in ng-repeat

Uso:

  

Referencias

ngSelected : https://docs.angularjs.org/api/ng/directive/ngSelected

$ primero : https://docs.angularjs.org/api/ng/directive/ngRepeat

Aclamaciones

Es una especie de solución, pero funciona como un encanto. Simplemente agregue como relleno. Como en:

  

Hay varias formas como –

  

O

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

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

 ` 

Cambia tu código así Te olvidas del valor dentro de la opción. Antes de asignar el modelo ng. Debe tener un valor. Solo entonces no obtiene el valor indefinido.

 

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

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

Tenía opciones como [0, 1] y, inicialmente, establecí el modelo en 0 porque se había insertado la opción vacía. La solución para esto fue [“0”, “1”].