Question

我正在尝试对输入元素实施过滤。我想使用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" />'
    }
})

是否可能将我的代码移入过滤器功能？我有很多业务逻辑，我不想将我的代码保存在控制器中，因为它将是可重用的指令。

Answer 1

我认为将这部分功能作为过滤器实现并不是最好的选择。

如果你将它作为指令在你的输入元素上实现，那将会更加动态，如：

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

在这种情况下，它会更灵活。您将能够将参数传递给指令（例如，可接受值的长度）。

另外，对于其他开发人员而言，将输入作为指令的模板并不是真的可读，因为您使用模型作为输入字段的属性而不是将其绑定到指令。

你有没有理由使用指令来渲染简单的输入？如果没有，那么只需在视图中将其作为输入，并添加指令而不是过滤器来处理数据检查限制。

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

以下是文档示例 - Implementing custom form controls (using ngModel)

如何在AngularJS中过滤输入值

1 个答案: