как фильтровать входное значение в AngularJS

Я пытаюсь реализовать фильтрацию на моем входном элементе. Я хочу сделать фильтрацию для ввода С полем type= "text". Например, если модель содержит больше доступных символов, чем я хочу изменить свое входное значение. Я создал jsfiddle У меня есть директива, которая генерирует шаблон html динамически и содержит поле ввода.

var app = angular.module('app', [])

.controller('ctrlr', function($scope){
    $scope.myModel = "test";
    $scope.availableCharacters = 5;
    $scope.$watch('myModel', function(newValue, oldValue){
        if(!newValue){
            return;
        }
        if(newValue.length > 5){
             $scope.cutString();       
         }
    });
    $scope.cutString = function(){
        var length = $scope.myModel.length;
        var string = $scope.myModel.slice(0, $scope.availableCharacters);
        var countStars = length - string.length;
        $scope.myModel = $scope.createStars(string, countStars);
    }
    $scope.createStars = function(string, countStars){
        for(var i = 1; i <= countStars; i++){
                string = string+'*';
            }

        return string;
    }
})
.directive('awesome' , function(){
    return {
        restrict:'E',
        template:'<input type="text" ng-model="myModel" ng-value="myModel | filter:my" />'
    }
})

Возможно ли переместить мой код в функцию фильтра? У меня много бизнес-логики, и я не хочу держать свой код в контроллер, потому что это будет многоразовая директива.

1 2
javascript angularjs angularjs-directive angularjs-filter

1 ответ:

Я думаю, что реализация этой части функциональности в качестве фильтра не самая лучшая идея.

Было бы намного динамичнее, если бы вы реализовали его как директиву для вашего входного элемента, например: 

<input type="text" ng-model="myModel" ng-value="myModel" max-length="20" />

В этом случае он был бы более гибким. Вы сможете передать аргумент в директиву (например, длина допустимого значения).

Кроме того, это действительно не читается для других разработчиков, чтобы сделать ваш ввод в качестве шаблона вашей директивы, потому что вы используете модель как атрибут поля ввода и не связывающая его с директивой.

Есть ли какая-либо причина, по которой вы используете директиву для визуализации простого ввода? Если нет, то просто жить его в качестве входных данных в вашем представлении и добавить директиву вместо фильтра для работы с ограничениями проверки данных.

Другой подход заключается в реализации пользовательских элементов управления формами. Это позволит вам контролировать входящие и исходящие данные.

Вот пример из документации - реализация пользовательских элементов управления формами (используя ngModel)

0