Angular.js: Característica: ngTrueValue debe aceptar valores que no sean cadenas

Creado en 25 jul. 2012  ·  60Comentarios  ·  Fuente: angular/angular.js

Para las casillas de verificación del modelo ng, ngTrueValue solo admite cadenas. Realmente debería aceptar una expresión angular y evaluar para obtener el valor, de modo que admita, por ejemplo, un objeto js.

PRs plz! forms moderate feature

Comentario más útil

Acabo de darme cuenta de algo interesante. Lo que estaba tratando de hacer, y por lo que parece, lo que muchos de ustedes han estado tratando de hacer, en realidad se puede lograr con:

ng-true-value="{{ myVariable | json }}"

Esto admite valores de cadena, booleanos y números. Todavía no estoy seguro de si realmente me gusta esto, pero ciertamente lo encontré entretenido. Y tal vez esto ayude a alguien más.

Todos 60 comentarios

No estoy completamente seguro del propósito de ngTrueValue , excepto que parece una directiva de conveniencia para agregar relojes a un controlador para un caso. Sospecho que si desea establecer algún modelo en un valor complejo, podría ser más limpio poner un $scope.$watch en el modelo de su casilla de verificación y modificar un modelo en el alcance en consecuencia.

@coli , ¿tiene un caso de uso específico en mente? @IgorMinar , @mhevery , @vojtajina , ¿qué opinan ustedes?

El caso de uso es bastante común en realidad:

Tengo una matriz de objetos de categoría, digamos, en $scope.categories=[{id:5,name:"First"},...}

Luego tengo una matriz de categorías seleccionadas que contiene un subconjunto de esas categorías.

Quiero mostrar una casilla de verificación para algunas categorías (paginación), y cuando marca o desmarca la casilla de verificación, las categorías seleccionadas cambian.

De hecho, escribí una directiva que sobrescribirá el comportamiento predeterminado de la casilla de verificación para agregar soporte para lo anterior. Puedo compartir el código si es necesario.

Mi uso terminó así, se necesitaba keyField para hacer una comparación de objetos como en mi caso, el objeto de grupo seleccionado y el objeto de grupo podrían ser ligeramente diferentes inicialmente (provinieron de 2 API de back-end diferentes)

<ng-repeat="group in groups>
    <input type='checkbox' ng-model="selectedArray" ng-true-value="group" mi-checkbox="{keyField:'id'}">
</>

Diablos, tengo un caso de uso mucho más simple que me decepcionó descubrir que no funciona: ¡necesito un número entero, en lugar de una cadena!

Estoy usando una plantilla para representar un control de casilla de verificación. En este caso, no puedo saber el valor real, ese valor depende de la información de control específica que quiero representar.

Yo también preferiría que ng-true-value sea una expresión. Si su número de casillas de verificación se determina en tiempo de ejecución, debe recurrir a métodos de alcance con contenedores de tiempo de espera.

+1. Expresión de soporte en ng-true-value

+1 Soporte entero en ng-true-value

+1 para expresión en lugar de cadena

¡Expresiones de apoyo +1!

+1 para expresiones

+1 Objetos de apoyo:

<div ng-repeat="group in groups">
    <input type='checkbox' ng-model="array[$index]" ng-true-value="group" />
</div>

@coli , ¿te importaría compartir la directiva que escribiste? Sería de gran ayuda para mí mientras este problema aún se está considerando. ¿Quizás en esencia?

@brab Desafortunadamente , lo escribí en un trabajo anterior, pero básicamente, es similar al código integrado para las casillas de verificación, lo copié/pegué en una directiva personalizada y agregué soporte para expresiones. (+ un truco feo para quitar el incorporado)

¡Las expresiones serían geniales! Sin embargo, incluso se esperaría una prueba de verdad de javascript para números enteros. Uso $resource para completar un objeto que devuelve valores enteros (1 o 0) de una base de datos booleana. Luego, estos se adjuntan al $ alcance para el cual está vinculado el modelo ng en la entrada. Me sorprendió mucho descubrir que establecer ng-true-value="1" no reconocería el entero 1 como verdadero y marcaría la casilla. Mientras tanto, buscará otros métodos mencionados.

+1

+1 para expresiones

+1. Expresión de soporte en ng-true-value

¡+1 en expresiones de apoyo!
En mi caso, necesito construir un formulario dinámicamente.
Por ejemplo: http://jsfiddle.net/federosky/N8Wjm/5/

+1 para entero

1+ para entero

+1 para entero (o cualquier número JS)

:+1: para expresiones de apoyo por favor! ¡por favor! por favor! :-)

+1 al menos para soporte de enteros, preferiblemente también expresiones.

¿Qué tal si alguien presenta un PR para respaldar los números?

+1 para expresiones

+1 para entero

+1 para entero

+1

:+1: para expresiones.

+1. Simplemente me encuentro con el problema cuando tengo una propiedad booleana 'oculta' que debería representarse como casilla de verificación 'Visible' en la página. Por lo tanto, necesito que el estado 'marcado' signifique FALSO y no marcado para significar 'VERDADERO'.

Me pregunto cuál sería una solución fácil para este problema. Realmente no me gusta escribir mi propia directiva de casilla de verificación o contaminar el alcance con las propiedades booleanas auxiliares inversas solo para usarlas para el enlace indirecto.

Es probable que esto sea bastante trivial de implementar, lo intentaré antes de acostarme.

Mi parche solo admite expresiones constantes, pero si la gente realmente lo necesita, supongo que cualquier expresión sería suficiente. Sin embargo, esta era la forma más fácil de no causar un cambio radical.

+1

+1

+1

+1 para tipo entero

+1

+1 para expresiones

+1

+1

+1

+1

:+1:

Estos son los trucos que se requieren ahora (muchos WTF):

<input type="checkbox" ng-model="fake" ng-checked="!notChecked" ng-change="notChecked = !notChecked"/>

+1

+1 Han pasado dos años de "+1". ¿Por qué no estamos apoyando esto todavía?

@jancarloviray , +1

Lástima: para mí esto significa que las cosas se complicaron más.
Anteriormente usaba
ng-true-value="{{proxyOnValue}}"
donde proxyOnValue se inicializó en un controlador.
(La misma vista se reutiliza para la configuración del proxy HTTP/HTTPS/FTP/POP3/SMTP donde el valor real es diferente).

Ahora lo intenté
ng-true-value="proxyOnValue"
pero eso arroja una excepción porque la expresión no es constante.

Entonces, esto significa que tengo que reemplazar una implementación simple (ngTrueValue) con una implementación más compleja (watch u Object.defineProperty), por lo que en realidad es lo contrario de lo que se pretendía.

¿Por qué esta restricción artificial?
Sólo

  • use el valor actual de ngTrueValue/ngFalseValue siempre que el modelo cambie o el usuario haga clic en la casilla de verificación
  • por si acaso, tenga una vigilancia interna en las expresiones ngTrueValue/ngFalseValue (si no son constantes) y actualice el estado de la casilla de verificación cuando se active la vigilancia.

@eekboom : aún puede usar su interpolación: http://plnkr.co/edit/LQ6OpFjkjiFLxxMJ9hxj?p=preview

@petebacondarwin : puede usar la interpolación, pero no lo ayudará: http://plnkr.co/edit/nNwjEkPIDJwe60HWX950?p=preview
El valor se verifica solo una vez; los cambios posteriores no se tienen en cuenta, por lo que solo se usa el valor inicial siempre.

@dliebscher : entendí que @eekboom solo quería inicializarlo una vez:

Anteriormente usé ng-true-value="{{proxyOnValue}}" donde se inicializó proxyOnValue en un controlador.

Sí y no: quiero inicializarlo solo una vez, pero solo después de que la configuración del proxy se haya cargado a través de xhr. Entonces cambia (de indefinido) una vez que se inicializa la vista.

@eekboom
Cuando estaba migrando de 1.2, cambié a lo siguiente:

ng-true-value="{{proxyOnValue}}"

a

ng-true-value="'{{proxyOnValue}}'"

Que funciona, pero parece tonto

Acabo de darme cuenta de algo interesante. Lo que estaba tratando de hacer, y por lo que parece, lo que muchos de ustedes han estado tratando de hacer, en realidad se puede lograr con:

ng-true-value="{{ myVariable | json }}"

Esto admite valores de cadena, booleanos y números. Todavía no estoy seguro de si realmente me gusta esto, pero ciertamente lo encontré entretenido. Y tal vez esto ayude a alguien más.

getu-lar He intentado lo que dijiste, con un objeto complejo, funciona. En el ng-false-value que llené con ng-false-value="{}" Antes de tratar con los datos, paso un filtro para eliminar todos los valores falsos de la matriz. ¡Muchas gracias!

La solución de getu-lar funcionó para mí. Gracias.

Estaba tratando de usar una expresión que se resolvió en una cadena con un guión bajo, por ejemplo, "101_3". Usé la solución de getu-lar y simplemente funciona. Sin embargo, se siente como un truco. Gracias por compartirlo !

+1 para expresiones

+1

No parece que haya muchas esperanzas de que el equipo de Angular proporcione una directiva de casilla de verificación sana para la serie 1.x... No puede ser demasiado difícil. El soporte de expresión sería totalmente compatible con versiones anteriores debido a la cita obligatoria.

Hasta entonces, la solución sugerida funciona para mí:

ng-true-value="{{ myVariable | json }}"

Asegúrese de que myVariable esté definido en el controlador. Intenté definirlo en post-link y no funcionó.

¿Fue útil esta página
0 / 5 - 0 calificaciones