0

我正在尝试实现一种通用的剩余功能。我的表单中有一堆字段，例如：name和address。这些字段有字符大小的限制，我的目标是制作一个通用函数来限制它的大小。所以我做了一个有效的示例函数：

首先在页面上：

label(for='name') Name {{remaining()}} of {{totalChars}}

二，处理它的代码：

$scope.totalChars = 10;

$scope.remaining = function() {
    var count = 0;

if ($scope.mName) {
    count = $scope.mName.length;

    if (count > $scope.totalChars) {
        $scope.mName = $scope.mName.trim().substr(0, $scope.mName.length - 1);
        count = $scope.mName.length;
    }
}

return count;

    //return calculateChars($scope.mName, $scope.totalChars);
};

当我在名称字段中输入一些输入值时，当达到 10 个字符时，角度也会停止输入。但是我已经重新制作了该功能以通用方式将其转换并尝试将其用于我想要的任何字段，但没有按预期工作：

$scope.totalChars = 10;

$scope.remaining = function() {
    return calculateChars($scope.mName, $scope.totalChars);
};

...

function calculateChars(obj, size) {
    var count = 0;

    if (obj && obj !== 'undefined') {
        count = obj.length;

        if (count > size) {
            $scope.obj = obj.trim().substr(0, obj.length - 1);
            console.log('Result: ' + $scope.obj);
            count = obj.length;
        }
    }

    return count;
}

calculateChars工作偏向性很好，问题是因为$scope.obj = obj.trim().substr(0, obj.length - 1);angularjs 不知道“obj”是什么，并且在达到 10 个字符时不会停止输入，甚至正确计算数量。

我不知道如何使第一种方法适用于任何情况，而不需要为我想要的任何文本字段重复任何代码。

提前致谢！

4

1 回答 1

1

听起来您正在寻找指令。这是一个名为的指令示例remaining，给定模型和“最大长度”属性，显示剩余的字符数。它还可以防止用户输入超过最大字符数；这可以通过去掉if (remaining < 0)链接函数中检查的第一个分支来删除。

app.directive('remaining', function() {
  return {
    template: "{{remaining}} of {{maxLen}}",
    scope: {
      maxLen: '@max',
      model: '=ngModel'
    },
    link: function(scope, elem, attrs) {
      scope.$watch('model', function(val) {
        if (val == null || val == undefined) return;
        var maxLen = parseInt(scope.maxLen, 10);
        var remaining = maxLen - val.length;
        if (remaining < 0)
          scope.model = val.substr(0, maxLen);
        else
          scope.remaining = remaining;
      });
    }
  };
});

这是一个 jsFiddle 来演示：http: //jsfiddle.net/BinaryMuse/JanZm/。注意我正在使用 AngularJS 的 1.1.x 版本来访问该ngTrim指令，该指令告诉 Angular 不要去除文本字段中的空白。

于 2013-01-30T06:38:20.503 回答