javascript - llenar - ng-options cómo configurar primero seleccione siempre en blanco

option selected angular js

Question

Estoy usando angularjs en un proyecto y en el que estoy usando ng-options para generar.

Inicialmente, cuando las páginas se vuelven a cargar y no se selecciona ningún elemento de opción, se genera el html como a continuación:

<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
</select>

Pero cuando selecciono un elemento (ej. Elemento 2), la primera selección en blanco desaparece. Sé que está sucediendo cuando el modelo ng se está configurando mediante un valor de selección. Pero primero quiero seleccionar siempre en blanco para que el usuario pueda restablecer el filtro.

Gracias por adelantado.

Answer 1

Esto hará el trabajo por ti:

<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
    <option value="">Select Option</option>
</select>

Answer 2

La solución anterior dañará el modelo con datos no deseados. Utilice la directiva para restablecer el modelo de la manera correcta JS: Seleccionar opción

Directive"
 .directive(''dropDown'', function($filter) {
    return {

        require: ''ngModel'',
        priority: 100,
        link: function(scope, element, attr, ngModel) {

            function parse(value) {

                if (value) {

                    if(value === "")
                    {
                        return "crap"
                    }
                    else
                    {
                        return value;
                    }

                } else {
                    return;
                }
            }


            ngModel.$parsers.push(parse);

        }
    };
});

Answer 3

Para cualquier persona que trate el valor "nulo" como un valor válido para una de las opciones (así que imagine que "nulo" es el valor de uno de los elementos en typeOptions en el ejemplo a continuación), encontré la forma más sencilla de asegurarme de que se agregara automáticamente La opción está oculta es usar ng-if.

<select ng-options="option.value as option.name for option in typeOptions">
    <option value="" ng-if="false"></option>
</select>

¿Por qué ng-if y no ng-hide? Debido a que desea que los selectores de css apunten a la primera opción dentro de la opción anterior, seleccione la opción "real", no la que está oculta. Se vuelve útil cuando usa el transportador para las pruebas e2e y (por cualquier razón) usa by.css () para seleccionar las opciones de selección.

Kevin - Sưu Tầm

Answer 4

Parece que su mejor opción sería tener el elemento en blanco incluido como el primer elemento en la lista de elementos.

Answer 5

Puede renunciar al uso de las ng-options y usar ng-repeat lugar y dejar la primera opción en blanco. Vea el ejemplo a continuación.

<select size="3" ng-model="item">
    <option value="?" selected="selected"></option>
    <option ng-repeat="s in itemlist" value="{{s.value}}">{{s.name}}</option>
</select>

Answer 6

Controlador

$scope.item = '''';

$scope.itemlist = {
   '''' = '''',
   ''Item 0'' = 1,
   ''Item 1'' = 2,
   ''Item 2'' = 3
};

HTML

<select data-ng-model="item" data-ng-options="v as k for (k, v) in itemlist"></select>

Answer 7

        <select ng-model="dataItem.platform_id"
            ng-options="item.id as item.value for item in platformList"
            ng-init="dataItem.platform_id=dataItem.platform_id||platformList[0].id"></select>