Angular.js: Fonctionnalité : ngTrueValue doit accepter des valeurs autres que des chaînes

Créé le 25 juil. 2012  ·  60Commentaires  ·  Source: angular/angular.js

Pour les cases à cocher ng-model, ngTrueValue ne prend en charge que la chaîne. Il devrait vraiment accepter une expression angulaire et eval pour obtenir la valeur afin qu'il prenne en charge, par exemple, un objet js.

PRs plz! forms moderate feature

Commentaire le plus utile

Je viens d'avoir une réalisation intéressante. Ce que j'essayais de faire - et à première vue, ce que beaucoup d'entre vous ont essayé de faire - peut en fait être accompli avec :

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

Cela prend en charge les valeurs de chaîne, les booléens et les nombres. Je ne sais pas encore si j'aime vraiment ça, mais je l'ai certainement trouvé amusant. Et peut-être que cela aidera quelqu'un d'autre.

Tous les 60 commentaires

Je ne suis pas tout à fait sûr du but de ngTrueValue , sauf que cela ressemble à une directive de commodité pour ajouter des montres à un contrôleur pour un cas. Je soupçonne que si vous voulez définir un modèle sur une valeur complexe, il pourrait être plus propre de mettre un $scope.$watch sur le modèle de votre case à cocher et de modifier un modèle sur la portée en conséquence.

@coli , avez-vous un cas d'utilisation spécifique en tête ? @IgorMinar , @mhevery , @vojtajina , qu'en pensez-vous ?

Le cas d'utilisation est assez courant en fait :

J'ai un tableau d'objets de catégorie par exemple dans $scope.categories=[{id:5,name:"First"},...}

Ensuite, j'ai un tableau selectedCategories qui contient un sous-ensemble de ces catégories.

Je souhaite afficher une case à cocher pour certaines catégories (pagination), et lorsque vous cochez ou décochez la case, les catégories sélectionnées sont modifiées.

J'ai en fait écrit une directive qui écrasera le comportement de la case à cocher par défaut pour ajouter la prise en charge de ce qui précède. Je peux partager le code si besoin.

Mon utilisation s'est terminée comme ça, keyField était nécessaire pour faire la comparaison d'objets comme dans mon cas, l'objet de groupe sélectionné et l'objet de groupe pouvaient être légèrement différents au départ (ils provenaient de 2 API backend différentes)

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

Heck, j'ai un cas d'utilisation beaucoup plus simple que j'ai été déçu de découvrir et qui ne fonctionne pas - j'ai besoin d'un entier plutôt que d'une chaîne!

J'utilise un modèle pour rendre un contrôle de case à cocher. Dans ce cas, je ne peux pas connaître la vraie valeur, cette valeur dépend des informations de contrôle spécifiques que je veux rendre.

Moi aussi je préférerais que ng-true-value soit une expression. Si votre nombre de cases à cocher est déterminé au moment de l'exécution, vous devez recourir à des méthodes de portée avec des wrappers de délai d'attente.

+1. Prise en charge de l'expression dans ng-true-value

+1 Prend en charge l'entier dans ng-true-value

+1 pour l'expression au lieu de la chaîne

+1 Expressions de soutien !

+1 pour les expressions

+1 Objets de support :

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

@coli cela vous dérangerait-il de partager la directive que vous avez écrite ? Cela me serait d'une grande aide pendant que ce problème est encore à l'étude. Peut-être dans l'essentiel ?

@brab Je l'ai malheureusement écrit lors d'un travail précédent, mais fondamentalement, il est similaire au code intégré pour les cases à cocher, j'ai copié/collé dans une directive personnalisée et j'ai ajouté la prise en charge des expressions. (+ un vilain hack pour supprimer celui intégré)

Les expressions seraient géniales! Cependant, même des tests de vérité javascript pour les nombres entiers seraient attendus. J'utilise $resource pour remplir un objet qui renvoie des valeurs entières (1 ou 0) à partir d'un booléen de base de données. Ceux-ci sont ensuite attachés à la portée $ pour laquelle le modèle ng sur l'entrée est lié. A été vraiment surpris de découvrir que le paramètre ng-true-value="1" ne reconnaîtrait pas l'entier 1 comme vrai et cocherait la case. Je vais examiner d'autres méthodes mentionnées dans l'intervalle.

+1

+1 pour les expressions

+1. Prise en charge de l'expression dans ng-true-value

+1 sur les expressions de support !
Dans mon cas, besoin de construire un formulaire dynamiquement.
Par exemple : http://jsfiddle.net/federosky/N8Wjm/5/

+1 pour l'entier

1+ pour entier

+1 pour un entier (ou n'importe quel nombre JS)

:+1: pour les expressions de soutien s'il vous plaît ! s'il te plaît! s'il vous plait ! :-)

+1 au moins pour le support des nombres entiers, de préférence les expressions également.

Que diriez-vous que quelqu'un propose un PR pour des chiffres à l'appui ?

+1 pour les expressions

+1 pour l'entier

+1 pour l'entier

+1

:+1 : pour les expressions.

+1. Il suffit de rencontrer le problème lorsque j'ai une propriété booléenne "cachée" qui doit être représentée par une case à cocher "Visible" sur la page. Donc, j'ai besoin de l'état "vérifié" pour signifier FAUX et décoché pour signifier "VRAI".

Je me demande quelle serait une solution de contournement facile pour ce problème? Je n'aime pas vraiment écrire ma propre directive de case à cocher ou polluer la portée avec les propriétés booléennes auxiliaires inverses juste pour les utiliser pour la liaison indirecte.

C'est probablement assez trivial à mettre en œuvre, je vais essayer avant de me coucher.

Mon patch ne supporte que les expressions constantes, mais si les gens en ont vraiment besoin, je suppose que n'importe quelle expression suffirait. C'était cependant le moyen le plus simple de ne pas provoquer de changement de rupture.

+1

+1

+1

+1 pour le type entier

+1

+1 pour les expressions

+1

+1

+1

+1

:+1:

Ce sont les hacks qui sont nécessaires maintenant (beaucoup de WTF):

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

+1

+1 ça fait deux ans de "+1". Pourquoi ne soutenons-nous pas encore cela ?

@jancarloviray , +1

Dommage : pour moi, cela signifie que les choses se sont compliquées.
Auparavant, j'utilisais
ng-true-value="{{proxyOnValue}}"
où proxyOnValue a été initialisé dans un contrôleur.
(La même vue est réutilisée pour la configuration du proxy HTTP/HTTPS/FTP/POP3/SMTP où la valeur réelle est différente.)

Maintenant j'ai essayé
ng-true-value="proxyOnValue"
mais cela lève une exception car l'expression n'est pas constante.

Cela signifie donc que je dois remplacer une implémentation simple (ngTrueValue) par une implémentation plus complexe (watch ou Object.defineProperty), donc en fait le contraire de ce qui était prévu.

Pourquoi cette restriction artificielle ?
Juste

  • utiliser la valeur actuelle de ngTrueValue/ngFalseValue chaque fois que le modèle change ou que l'utilisateur clique sur la case à cocher
  • pour faire bonne mesure, ayez une surveillance interne sur les expressions ngTrueValue/ngFalseValue (si elles ne sont pas constantes) et mettez à jour l'état de la case à cocher lorsque la surveillance se déclenche.

@eekboom - vous pouvez toujours utiliser votre interpolation : http://plnkr.co/edit/LQ6OpFjkjiFLxxMJ9hxj?p=preview

@petebacondarwin - il peut utiliser l'interpolation, mais cela ne l'aidera pas : http://plnkr.co/edit/nNwjEkPIDJwe60HWX950?p=preview
La valeur n'est vérifiée qu'une seule fois - les modifications ultérieures ne sont pas prises en compte, de sorte que seule la valeur initiale est toujours utilisée.

@dliebscher - j'ai cru comprendre que @eekboom ne voulait l'initialiser qu'une seule fois :

Auparavant, j'utilisais ng-true-value="{{proxyOnValue}}" où proxyOnValue était initialisé dans un contrôleur.

Oui et non : je ne souhaite l'initialiser qu'une seule fois, mais uniquement après le chargement de la configuration du proxy via xhr. Il change donc (de non défini) une fois après l'initialisation de la vue.

@eekboom
Lorsque j'ai migré de 1.2, je suis passé à ce qui suit :

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

à

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

Qui fonctionne, mais semble stupide

Je viens d'avoir une réalisation intéressante. Ce que j'essayais de faire - et à première vue, ce que beaucoup d'entre vous ont essayé de faire - peut en fait être accompli avec :

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

Cela prend en charge les valeurs de chaîne, les booléens et les nombres. Je ne sais pas encore si j'aime vraiment ça, mais je l'ai certainement trouvé amusant. Et peut-être que cela aidera quelqu'un d'autre.

getu-lar j'ai essayé ce que vous avez dit, avec un objet complexe, ça marche. Dans la valeur ng-false, j'ai rempli ng-false-value="{}" .Avant de traiter les données, je passe un filtre pour supprimer toutes les valeurs fausses du tableau. Alors, merci beaucoup !

La solution de getu-lar a fonctionné pour moi. Merci.

J'essayais d'utiliser une expression qui se résolvait en une chaîne avec un trait de soulignement, par exemple "101_3". J'ai utilisé la solution de getu-lar et cela fonctionne tout simplement. Se sent comme un hack cependant. Merci de l'avoir partagé !

+1 pour les expressions

+1

Il ne semble pas y avoir beaucoup d'espoir pour l'équipe Angular de fournir une directive de case à cocher sensée pour la série 1.x... Cela ne peut pas être trop difficile. La prise en charge des expressions serait entièrement rétrocompatible en raison des guillemets obligatoires.

Jusque-là, la solution de contournement suggérée fonctionne pour moi:

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

Assurez-vous que myVariable est défini dans le contrôleur. J'ai essayé de le définir dans post-link et cela n'a pas fonctionné.

Cette page vous a été utile?
0 / 5 - 0 notes