Comment le faire de deux manière de filtrage dans AngularJS?

Une des choses intéressantes AngularJS pouvez faire est d'appliquer un filtre à une expression de liaison de données, qui est un moyen pratique de s'appliquer, par exemple, de la culture spécifique de la monnaie ou le formatage de la date de propriétés du modèle. Il est également agréable d'avoir les propriétés calculées sur le champ. Le problème est qu'aucun de ces fonctionnalités fonctionnent avec les deux sens de la liaison de données de scénarios - seulement un moyen de liaison de données à partir de la portée de la vue. Cela semble être une lacune évidente dans une excellente bibliothèque - ou ai-je raté quelque chose?

Dans KnockoutJS, j'ai pu créer lecture/écriture à une propriété calculée, ce qui m'a permis de spécifier une paire de fonctions, qui est appelé pour obtenir la valeur de la propriété, et qui est appelé lorsque la propriété est définie. Cela m'a permis de mettre en œuvre, par exemple, de la culture-courant d'entrée permettant à l'utilisateur de type "$1.24" et l'analyse que dans un flotteur dans le ViewModel, et avoir des changements dans le ViewModel reflète dans l'entrée.

La chose la plus proche que j'ai pu trouver similaire pour ce qui est de l'utilisation de $scope.$watch(propertyName, functionOrNGExpression); Cela me permet d'avoir une fonction appelée lorsqu'une propriété dans le $scope changements. Mais cela ne résout pas, par exemple, la culture-courant d'entrée du problème. Notez les problèmes lorsque je tente de modifier le $watched bien au sein de la $watch méthode elle-même:

$scope.$watch("property", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.property = Globalize.parseFloat(newValue);
});

(http://jsfiddle.net/gyZH8/2/)

L'élément d'entrée est très confus lorsque l'utilisateur commence à taper. J'ai amélioré par le fractionnement de la propriété en deux propriétés, l'une pour la unparsed valeur et l'autre pour la valeur analysée:

$scope.visibleProperty= 0.0;
$scope.hiddenProperty = 0.0;
$scope.$watch("visibleProperty", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.hiddenProperty = Globalize.parseFloat(newValue);
});

(http://jsfiddle.net/XkPNv/1/)

C'était une amélioration par rapport à la première version, mais est un peu plus verbeux, et notez qu'il existe toujours un problème de la parsedValue propriété des changements de périmètre (tapez quelque chose dans la deuxième entrée, qui modifie la parsedValue directement. avis du haut d'entrée n'est pas à jour). Cela peut se produire à partir d'un contrôleur de l'action ou de charger des données à partir d'un service de données.

Est-il un moyen plus facile à mettre en œuvre ce scénario en utilisant AngularJS? Suis-je manque certaines fonctionnalités dans la documentation?

InformationsquelleAutor Jeremy Bell | 2012-07-23
  1. 229

    Il s'avère qu'il existe une solution élégante à ce problème, mais ce n'est pas bien documentée.

    Formatage des valeurs de modèle pour l'affichage peuvent être traitées par le | opérateur et angulaire formatter. Il s'avère que le ngModel qui n'a pas seulement une liste de formateurs, mais aussi une liste des analyseurs.

    1. Utilisation ng-model pour créer les deux sens de la liaison de données

    <input type="text" ng-model="foo.bar"></input>

    2. Créer une directive dans votre angulaire module qui sera appliquée pour le même élément et qui dépend de la ngModel contrôleur

    module.directive('lowercase', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            ...
        }
    };
});

    3. Dans le link méthode, ajouter votre personnalisé des convertisseurs pour le ngModel contrôleur

    function fromUser(text) {
    return (text || '').toUpperCase();
}

function toUser(text) {
    return (text || '').toLowerCase();
}
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);

    4. Ajouter votre nouvelle directive de l'élément qui a déjà le ngModel

    <input type="text" lowercase ng-model="foo.bar"></input>

    Voici un exemple de travail qui transforme le texte en minuscules dans le input et à l'arrière de majuscules dans le modèle

    La La Documentation de l'API pour le Modèle de Contrôleur a également une brève explication et un aperçu des autres méthodes disponibles.

    • EST-il une raison que vous avez utilisé "ngModel" comme nom pour la quatrième parametet dans votre fonction de liaison? N'est-ce pas juste un contrôleur générique de la directive qui a fondamentalement rien à voir avec le ngModel attribut? (Toujours en apprentissage angulaire ici afin que je puisse être totalement faux.)
    • En raison de "l'exigent: 'ngModel'", la fonction de liaison de 4e paramètre sera le ngModel directive du contrôleur -- c'est à dire, foo.bar du contrôleur, qui est une instance de ngModelController. Vous pouvez nommer le 4e paramètre que vous voulez. (J'aurais nom il ngModelCtrl.)
    • Cette technique est décrite dans le docs.angularjs.org/guide/forms, dans la section de Validation.
    • Rajcok dans le violon, tout en cliquant sur Charger des Données, tout en minuscules, je m'attendais à la valeur de modèle serait dans TOUS les BOUCHONS, mais le modèle de la valeur est en petit. Pourriez-vous pls. expliquer pourquoi, et comment faire le modèle toujours EN MAJUSCULES
    • depuis loadData2() modifie $scope directement, c'est ce que le modèle sera mis à... jusqu'à ce que l'utilisateur interagit avec la zone de texte. À ce moment, tous les analyseurs peut affecter la valeur de modèle. En plus d'un analyseur, vous pouvez ajouter un $montre à votre contrôleur de transformer le modèle de la valeur.
    • Salut les Gars, je suis nouveau sur angulaire et frappé dans ngModel, Cette explication est Ok, mais ce que j'ai de nouveau sentir, c'est que nous pouvons utiliser $filtres dans la directive comme filtre $('majuscule')(valeur) ou filtre $('minuscules')(valeur);et peut faire l'opération est effectuée à l'aide de ngModel.$les parseurs.push(fromUser); ngModel.$des formateurs.push(toUser);, de Sorte que lorsque/exactement pourquoi nous avons besoin de ngModel. Remarque: Cela peut être une question stupide, ou n'est pas valide, Mais s'il vous plaît me corriger.
    • Qu'est-ce que Si je veux afficher les lettres en minuscules lors de la saisie (c'est à dire, sur le changement) lui-même.
    • merci beaucoup! j'étais à la recherche pour cette soigné et conciese exemple pendant 8 heures! des formateurs et des analyseurs syntaxiques semblent être une puissante fonctionnalité comme JSF convertisseurs en java

    InformationsquelleAutor phaas