2013-06-27 7 views
11

Muszę zebrać wskaźnik zmian - w procentach - od użytkowników mojej aplikacji. Oto wprowadzania tekstu używam:AngularJS: Czy powinienem używać filtra do przeliczania wartości całkowitych na procenty?

<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> 

Teraz to, co chcę jest użycie filtru, który przyjmuje wartość całkowitą, która wejść użytkownika i przekształcić ją w procentach przez pomnożenie jej przez 0.01 lub dzieląc ją przez 100przed wysłaniem go do kontrolera do obliczeń

Ale nie mogę po prostu dowiedzieć się, gdzie umieścić filtr i jak go podłączyć. Próbowałem więc z taką dyrektywą:

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); 
     } 
    }; 
}); 

Ten rodzaj prac, ale czy nie powinienem używać filtra do tego zadania? Jak mam to zrobic?

+0

Filtr służy do odwzorowania zawartości jednej tablicy na drugą. Myślę, że powinieneś wykonać konwersję w kontrolerze. Co powstrzymuje cię od używania kontrolera. – Chandermani

+0

hmm - Myślałem, że filtry są dla "filtrowania" wartości, więc pomyślałem, że formatowanie, konwersja itp. Powinny być w filtrach –

+0

Nie ma pól, które muszą przejść tę konwersję i myślałem, że logika zostanie powtórzona w kontrolerze –

Odpowiedz

4

Cóż, po prostu zrobiłeś to w absolutnie prawidłowy sposób za pomocą ctrl. $ Parser i ctrl. $ Formatter Po prostu możesz pominąć filtr $, którego absulotycznie nie potrzebujesz. Just check it out nie używają tam również filtra.

+0

Masz rację - działa - oto działający plunker: http://plnkr.co/edit/Pfzyn4Bmw2B9jJzDVU1g ?p = preview –

+0

Właściwie to jestem naprawdę zaskoczony, że doszedłeś tak daleko z robieniem tych wszystkich poprawnych rzeczy z dyrektywą, wymaganą ngModelDirective, formaterami i wszystkim, i nagle masz ten filtr-blooper :) – kfis

+0

ok, więc faktycznie znalazłem ten fragment kodu na WIĘC i wydawało mi się, że nadal jest dla mnie dość zagadkowy. Wydaje mi się, że filtr przekształca dane modelu i przekazuje je z widoku do kontrolera, ale tak nie jest. –

0

Myślę, że powinieneś użyć dyrektywy. Jeśli myślisz, że masz zamiar wrócić do używania JQuery, aby zacząć manipulować elementami DOM, prawdopodobnie jest to dyrektywa, której potrzebujesz.

ten jest przykładem filtra: http://embed.plnkr.co/TT6ZwOF6nYXwMcemR3JF/preview

Co można zrobić, to filtrowanie wartości wpisywane jako część imprezy zegarka. Jednak zależy to od konkretnego przypadku użycia.

+0

Doceniam przykład, ale myślę, że nie rozumiem, że filtry reprezentują tylko dane - nie mówią t zaktualizuj dane modelu - więc domyślam się, że chcę, aby coś takiego było - w tym przypadku mój przykładowy kod nadal trwa –

Powiązane problemy