Javascript 如何过滤AngularJS中的输入值

Javascript 如何过滤AngularJS中的输入值,javascript,angularjs,angularjs-directive,angularjs-filter,Javascript,Angularjs,Angularjs Directive,Angularjs Filter,我试图在输入元素上实现过滤。 我想用type=“text”字段对输入进行过滤。 例如,如果模型包含的可用字符超过我想要更改输入值的字符数。 我创造了 我有一个动态生成html模板的指令,它包含输入字段 var app = angular.module('app', []) .controller('ctrlr', function($scope){ $scope.myModel = "test"; $scope.availableCharacters = 5; $sco

我试图在输入元素上实现过滤。 我想用type=“text”字段对输入进行过滤。 例如,如果模型包含的可用字符超过我想要更改输入值的字符数。 我创造了 我有一个动态生成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" />'
    }
})
var-app=angular.module('app',[])
.controller('ctrlr',函数($scope){
$scope.myModel=“测试”;
$scope.availableCharacters=5;
$scope.$watch('myModel',函数(newValue,oldValue){
如果(!newValue){
返回;
}
如果(newValue.length>5){
$scope.cutString();
}
});
$scope.cutString=函数(){
变量长度=$scope.myModel.length;
变量字符串=$scope.myModel.slice(0,$scope.availableCharacters);
var countStars=长度-string.length;
$scope.myModel=$scope.createStars(字符串,countStars);
}
$scope.createStars=函数(字符串,countStars){

对于(var i=1;i,我认为将这部分功能实现为过滤器不是最好的主意

如果您将其作为输入元素上的指令来实现,它将更加动态,如:

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

在这种情况下,它将更加灵活。您将能够将参数传递到指令中(例如,可接受值的长度)

另外,对于其他开发人员来说,将您的输入作为指令的模板是不可读的,因为您使用模型作为输入字段的属性,并且没有将其从指令绑定

您使用指令呈现简单输入有什么原因吗? 如果没有,那么只需在视图中将其作为输入使用,并添加指令而不是过滤器来处理数据检查限制


另一种方法是实现自定义表单控件。这将允许您控制传入和传出的数据


以下是文档中的一个示例-

感谢您的建议。我会考虑一下。我肯定会选择ngModelController,因为您在formfields上操作,并且不会在您希望将特定输入字段放置到应用程序的任何地方复制控制器代码。我在live i18n上遇到类似问题(无页面刷新)输入字段的数字值,当从德语切换到英语时,我必须切换数字的组和小数分隔符。正如U10提到的,查看ngModel。这个链接打开了我的思路,让我进入了ngModel的地狱。