web-dev-qa-db-ja.com

anglejsテキスト領域の文字カウンター

こんにちは、テキストエリアの文字カウンターがあります。私の問題は、スペースや改行をカウントしないことです。どうすればそうすることができますか？

   <div class="controls">

   <textarea rows="4" cols="50"  maxlength="1500" data-ng-minLength="1" data-ng  
    model="createprofilefields.description" required highlight-on-
    error></textarea>

    <br />

<!--counter-->
  <span class="form-help">{{1500-createprofilefields.description.length}}         
   Characters</span>

    </div>
angularjsangularjs-directiveangularjs-ng-repeatangular-ui
46
user1424508

これは、angularJSがモデルを自動的にトリミングしたためです。

AngularJS 1.1.1以降を使用している場合は、ng-trim="false"をtextareaに追加します。

作業例： http://jsfiddle.net/9DbYY/

80
Banana-In-Black

CharCountという名前のディレクティブを作成します

.directive('charCount', ['$log', '$timeout', function($log, $timeout){
    return {
        restrict: 'A',
        compile: function compile()
        {
            return {
                post: function postLink(scope, iElement, iAttrs)
                {
                    iElement.bind('keydown', function()
                    {
                        scope.$apply(function()
                        {
                            scope.numberOfCharacters = iElement.val().length;
                        });
                    });
                    iElement.bind('paste', function()
                    {
                        $timeout(function ()
                        {
                            scope.$apply(function()
                            {
                                scope.numberOfCharacters = iElement.val().length;
                            });
                        }, 200);
                    });
                }
            }
        }
    }
}])

HTMLでディレクティブchar-countを呼び出し、変数numberOfCharactersにアクセスします

<textarea
        ng-model="text"
        ng-required="true"
        char-count></textarea>
Number of Characters: {{ numberOfCharacters }}<br>
2
hugsbrugs

Angularでは、textareaにはngTrimというオプションの引数があります。 Angular textarea page によると：

Falseに設定すると、Angularは入力を自動的にトリミングしません。 （デフォルト：true）

使用法：

<textarea
  ng-model="string"
  [ng-trim="boolean"]>
...
</textarea>

次のコードは、Angularが入力をトリミングしないようにするためにngTrimを使用する方法を示しています。

<!DOCTYPE html>
<html lang="en" ng-app="">

<head>
    <meta charset="UTF-8">
    <title>Character count</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>

<body>
    <textarea ng-trim="false" ng-model="countmodel"></textarea>
    <p>{{15 - countmodel.length}} left</p>
</body>

</html>

input[text]には同じオプションのngTrim引数があることに注意してください（ Angular input page ）。

2
Imanou Petit

呼び出しで関数を使用できますng-change = ""

       <div class="controls">

   <textarea rows="4" cols="50"  maxlength="1500" 
        data-ng-minLength="1" data-ng  
        model="createprofilefields.description" 
        ng-change="countLength(createprofilefields.description.length)"
        required highlight-on-error>
   </textarea>

        <br />

    <!--counter-->
      <span class="form-help">{{1500-chrLength}}         
       Characters</span>

        </div>

およびcontroller.js内

$scope.countLength = function(val){
  $scope.chrLength = val;
}
0
sandeep kumar