2013-06-27 12 views
11

Ho bisogno di raccogliere un tasso di variazione - in percentuale - dagli utenti della mia applicazione. Ecco il metodo di scrittura che sto usando:AngularJS: dovrei usare un filtro per convertire i valori interi in percentuali?

<label for="annual-change" class="pt-underline"> I am anticipating 
<input id="annual-change" ng-model="calc.yrChange" type="text" placeholder="0" /> % of growth annually.<br><br> 
</label> 

Ora quello che voglio è quello di utilizzare un filtro che prende l'ammontare intero che gli input dell'utente e convertirlo in una percentuale moltiplicandolo per 0.01 o dividendolo per 100prima di inviarlo al controller per i calcoli

Ma non riesco a capire dove posizionare il filtro e come agganciarlo. Così ho provato con una direttiva in questo modo:

app.directive("percent", function($filter){ 
    var p = function(viewValue){ 
     console.log(viewValue); 
     var m = viewValue.match(/^(\d+)/); 
     if (m !== null) 
     return $filter('number')(parseFloat(viewValue)/100); 
    }; 

    var f = function(modelValue){ 
     return $filter('number')(parseFloat(modelValue)*100); 
    }; 

    return { 
     require: 'ngModel', 
     link: function(scope, ele, attr, ctrl){ 
      ctrl.$parsers.unshift(p); 
      ctrl.$formatters.unshift(f); 
     } 
    }; 
}); 

Questo tipo di opere, ma non dovrei usare un filtro per questo compito? Come faccio a fare questo?

+0

Il filtro serve per mappare il contenuto di un array su un altro. Penso che dovresti fare la conversione nel controller. Cosa ti impedisce di usare il controller. – Chandermani

+0

hmm - Pensavo che i filtri fossero per i valori di 'filtering' quindi pensavo che la formattazione, la conversione ecc. Dovessero essere nei filtri –

+0

Ci sono dei campi che devono passare attraverso questa conversione e ho pensato che la logica si sarebbe ripetuta nel controller –

risposta

4

Bene, hai appena fatto il modo giusto con il ctrl. $ Parser e ctrl. $ Formattatore Puoi semplicemente lasciare fuori la cosa $ filter, il suo absulotuly non è necessario lì. Just check it out non usano il filtro anche lì.

+0

Hai ragione - funziona - ecco un plunker funzionante: http://plnkr.co/edit/Pfzyn4Bmw2B9jJzDVU1g ?p = preview –

+0

In realtà sono davvero sorpreso che tu sia venuto così lontano da fare tutte queste cose corrette con la direttiva, la ngModelDirective, i formattatori e tutto e all'improvviso abbia questo filtro-blooper :) – kfis

+0

ok così ho effettivamente trovato lo snippet di codice su COSÌ e sembrava e sembra ancora abbastanza criptico per me. Avrei pensato che un filtro trasformasse i dati del modello e li passasse dalla vista al controller, ma non così. –

0

Penso che dovresti usare una direttiva. Se pensi di tornare a usare JQuery per iniziare a manipolare gli elementi DOM, allora una direttiva è probabilmente quello che vuoi.

Questo è un esempio di un filtro: http://embed.plnkr.co/TT6ZwOF6nYXwMcemR3JF/preview

Che cosa si potrebbe fare è filtrare il valore inserito come parte di un evento orologio. Tuttavia ciò dipende dal tuo caso d'uso specifico.

+0

Apprezzo l'esempio, ma penso che ciò che non ho capito è che i filtri rappresentano solo i dati - non donano t aggiornare i dati del modello - quindi suppongo di volere è qualcosa che lo fa - in questo caso il mio esempio di codice è ancora –

Problemi correlati