javascript - que - Valor booleano angular en un cuadro de selección

parse boolean string javascript

Question

Quiero establecer un valor booleano en verdadero o falso usando un seleccionar aquí es mi código:

<select class="span9" ng-model="proposal.formalStoryboard">
<option value="false">Not Included</option>
<option value="true">Included</option>
</select>

El valor (proposal.formalStoryboard) se establece correctamente en verdadero o falso, pero el cambio no se refleja en el cuadro de selección cuando el valor ya está asignado.

Probé ng-value = "true" y ng-value = "false" en lugar de solo valor, pero tampoco funciona.

Answer 1

¿Por qué no usar esto?

<select class="form-control" ng-options="(item?''Included'':''Not Included'') for item in [true, false]"></select>

Answer 2

Angular hace una comparación estricta entre el valor se une al modelo ng y los valores en las opciones dadas. Los valores dados en la pregunta inicial son las cadenas "falso" y "verdadero". Si el Valor de ng-model es de Tipo bool y se define como {"Valor": falso}, Angular estricta === La comparación entre cadena y bool nunca coincide, por lo que la casilla de selección está vacía.

El verdadero problema es que si selecciona un valor, el tipo cambiado de bool a cadena ({"Valor": falso} -> {"Valor": "falso"}) puede causar errores si se publica nuevamente.

La mejor solución para ambos problemas para mí fue la de Thiago Passos en este Post. ( https://.com/a/31636437/6319374 )

Answer 3

Creé una muestra para ti, por favor mira this .

¿Es lo que quiere usar el modelo para impulsar el enlace de la interfaz de usuario?

<div ng-app ng-controller="Ctrl">
    <select class="span9" ng-model="proposal.formalStoryboard">
        <option value="false">Not Included</option>
        <option value="true">Included</option>
    </select>
    <button ng-click="changeValue();">Click</button>
<div>

function Ctrl($scope) {
    $scope.proposal = {};
    $scope.proposal.formalStoryboard = true;

    $scope.changeValue = function () {
        $scope.proposal.formalStoryboard = !$scope.proposal.formalStoryboard;
        console.log($scope.proposal.formalStoryboard);
    }
}

Answer 4

Esto también funcionará. Simplemente fuerce que el valor sea booleano colocando una expresión angular para el valor.

<select class="span9" ng-model="proposal.formalStoryboard">
    <option value="{{false}}" 
           ng-selected="proposal.formalStoryboard === false">
           Not Included
    </option>
    <option value="{{true}}"
            ng-selected="proposal.formalStoryboard === true">
            Included
    </option>
</select>

Answer 5

No estoy seguro de qué versión de angular fue compatible, pero ahora puede usar el ng-value en un elemento de opción. Tus htmls funcionarían así.

<select ng-model="proposal.formalStoryboard">
    <option ng-value="true">Included</option>
    <option ng-value="false">Not Included</option>
</select>

También funciona en la radio y las casillas de verificación.

Answer 6

Simplemente hazlo así:

<select ng-model="someModel" ng-options="boolToStr(item) for item in [true, false]">
</select>

y define:

$scope.boolToStr = function(arg) {return arg ? ''Included'' : ''Not included''};

Answer 7

Tuve muy poco éxito con este tema frustrante. Mi solución, si bien no es demasiado elegante ya que es una línea adicional de código, lo resolvió todo el tiempo. Esto puede no funcionar en todas las aplicaciones.

$scope.myObject.myBooleanProperty = $scope.myObject.myBooleanProperty.toString();

Convertirlo en una cadena "real" antes de intentar vincularlo al modelo que se muestra en la página le permitió seleccionar correctamente el valor.

Answer 8

Yo recomendaría usar una directiva para esto. Como de costumbre, trato de evitar los tiempos de espera y otras operaciones de sincronización con preferencia a un control más autoritario y directo.

directives.directive(''boolean'', function() {
  return {
    priority: ''50'',
    require: ''ngModel'',
    link: function(_, __, ___, ngModel) {
      ngModel.$parsers.push(function(value) {
        return value == ''true'' || value == true;
      });

      ngModel.$formatters.push(function(value) {
        return value && value != ''false'' ? ''true'' : ''false'';
      });
    }
  };
});

La prioridad se establece específicamente para que se realice antes que cualquier otra directiva (que generalmente no tiene un conjunto de prioridades, y se predetermina a 0 )

Por ejemplo, utilizo esta directiva (para una selección de verdadero / falso) con mi directiva selectpicker que envuelve mis elementos select en el selectpicker arranque de selectpicker .

Editar:

La advertencia aquí, que me olvidé de mencionar, es que los valores html deben ser valores de cadena. Lo que hace la directiva es traducir entre la vista y el modelo, manteniendo el valor del modelo en boolean y su vista en formato de string :

%select.selectpicker{ ng: { model: ''modelForm.listed'' }, selectpicker: ''{ }'', boolean: true }
  %option{ value: ''true'' } Listed
  %option{ value: ''false'' } Unlisted

Answer 9

EDITAR: Los comentaristas han señalado que mi solución original no funcionó como se dijo. He actualizado la respuesta para reflejar la respuesta correcta dada por otros a continuación (no puedo eliminar una respuesta aceptada).

Para Angular 1.0.6, considere este HTML:

<div ng-app="">
  <div ng-controller="MyCntrl">
    <select ng-model="mybool"
            ng-options="o.v as o.n for o in [{ n: ''Not included'', v: false }, { n: ''Included'', v: true }]">
    </select>
    <p>
        Currently selected: <b>{{ mybool }}</b> opposite: {{ !mybool }}
   </p> 
 </div>
</div>

Y este JavaScript:

function MyCntrl($scope) {
    $scope.mybool = true;
}

Aquí hay una DEMO funciona para Angular 1.0.6 y aquí hay una DEMO funciona para Angular 1.3.14, que es ligeramente diferente.

Answer 10

<script type=''text/javascript''>
function MyCntrl($scope) {<!--from   ww w . j  a  v a 2s.  c om-->
  $scope.mybool = true;
}

</script>
</head>
<body>
  <div ng-app="">
  <div ng-controller="MyCntrl">
    <select ng-model="mybool">
        <option value="false">Not Included</option>
        <option value="true">Included</option>
    </select>
    <p>
    Currently selected: {{ mybool }}
   </p>
 </div>
</div>
</body>
</html>