Mam wpisywanie tekstu i nie chcę, aby użytkownicy mogli używać spacji, a wszystko, co zostanie wpisane, zostanie zamienione na małe litery.
Wiem, że nie wolno mi używać filtrów w modelu ng, np.
ng-model='tags | lowercase | no_spaces'
Patrzyłem na stworzenie własnej dyrektywy, ale dodawanie funkcji do wejścia $parsers
i $formatters
nie aktualizowanie danych wejściowych, tylko inne elementy, które się ng-model
na nim znajdowały.
Jak mogę zmienić dane wejściowe, które aktualnie piszę?
Zasadniczo próbuję utworzyć funkcję „tagów”, która działa tak samo, jak ta tutaj w StackOverflow.
angularjs
angularjs-filter
dom-manipulation
angularjs-ng-model
Andrew WC Brown
źródło
źródło
Odpowiedzi:
Proponuję obserwować wartość modelu i aktualizować ją po zmianie: http://plnkr.co/edit/Mb0uRyIIv1eK8nTg3Qng?p=preview
Jedynym interesującym problemem są spacje: w AngularJS 1.0.3 ng-model na wejściu automatycznie przycina ciąg, więc nie wykrywa, że model został zmieniony, jeśli dodasz spacje na końcu lub na początku (więc spacje nie są automatycznie usuwane przez kod). Ale w 1.1.1 jest dyrektywa 'ng-trim', która pozwala na wyłączenie tej funkcjonalności ( zatwierdzenie ). Dlatego zdecydowałem się użyć wersji 1.1.1, aby uzyskać dokładną funkcjonalność, którą opisałeś w swoim pytaniu.
źródło
$watch
wymusza ponowne wywołanie detektora. W prostych przypadkach (gdy twój filtr jest idempotentny) skończy się to, że filtr będzie wykonywał się dwukrotnie przy każdej modyfikacji.Uważam, że intencją danych wejściowych i
ngModel
dyrektywy AngularJS jest, aby nieprawidłowe dane wejściowe nigdy nie trafiały do modelu . Model powinien być zawsze aktualny. Problem z posiadaniem nieprawidłowego modelu polega na tym, że możemy mieć obserwatorów, którzy odpalają i podejmują (nieodpowiednie) działania w oparciu o nieprawidłowy model.Jak widzę, właściwym rozwiązaniem jest tutaj podłączenie do
$parsers
potoku i upewnienie się, że nieprawidłowe dane wejściowe nie trafią do modelu. Nie jestem pewien, jak próbowałeś podejść do rzeczy lub co dokładnie Ci się nie udało,$parsers
ale oto prosta dyrektywa, która rozwiązuje Twój problem (lub przynajmniej moje zrozumienie problemu):Jak tylko powyższa dyrektywa zostanie zadeklarowana, może być używana w następujący sposób:
Podobnie jak w rozwiązaniu zaproponowanym przez @Valentyn Shybanov musimy użyć
ng-trim
dyrektywy, jeśli chcemy zabronić spacji na początku / końcu wejścia.Zaleta tego podejścia jest 2-krotna:
źródło
modelCtrl.$setViewValue(transformedInput); modelCtrl.$render();
Przydatne byłoby łącze do dokumentacji: docs.angularjs.org/api/ng.directive:ngModel.NgModelController Jednym słowem „chronić” moje rozwiązanie jest to, że właściwość zakresu można zmienić nie tylko z widoków i mój sposób to zakryć. Myślę więc, że to, jak można zmodyfikować zakres, zależy od rzeczywistej sytuacji.modelCtrl
jest kontrolerem wymaganym przez dyrektywę. (require 'ngModel'
)Rozwiązaniem tego problemu mogłoby być zastosowanie filtrów po stronie sterownika:
$scope.tags = $filter('lowercase')($scope.tags);
Nie zapomnij zadeklarować
$filter
jako zależności.źródło
Jeśli używasz pola wejściowego tylko do odczytu, możesz użyć wartości-ng z filtrem.
na przykład:
źródło
Użyj dyrektywy, która dodaje zarówno do kolekcji $ formatters, jak i $ parsers, aby upewnić się, że transformacja jest wykonywana w obu kierunkach.
Zobacz tę inną odpowiedź, aby uzyskać więcej informacji, w tym link do jsfiddle.
źródło
Miałem podobny problem i korzystałem
w moim programie obsługi wywołuję metodę objectInScope, aby poprawnie się zmodyfikować (zgrubne dane wejściowe). W kontrolerze gdzieś to zainicjowałem
Wiem, że to nie używa żadnych wymyślnych filtrów ani obserwatorów ... ale jest proste i działa świetnie. Jedyną wadą tego rozwiązania jest to, że objectInScope jest wysyłany w wywołaniu do programu obsługi ...
źródło
Jeśli wykonujesz złożone, asynchroniczne sprawdzanie poprawności danych wejściowych, warto wyodrębnić
ng-model
jeden poziom w górę jako część klasy niestandardowej z własnymi metodami walidacji.https://plnkr.co/edit/gUnUjs0qHQwkq2vPZlpO?p=preview
html
kod
źródło
Możesz tego spróbować
źródło