0

ある種の一般的な残りの機能を実現しようとしています。フォームには、名前と住所などのフィールドがたくさんあります。これらのフィールドには文字サイズの制限があります。私の目標は、到達したときにサイズを制限するジェネリック関数を作成することです。そこで、動作するサンプル関数を作成しました。

ページの最初：

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文字に達するとangularは入力を停止します。しかし、私はそれを一般的な方法で回して、私が望む任意のフィールドにそれを使用しようとするように関数を作り直しましたが、期待どおりに機能しません：

$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 に答える