angularjs文字區字符計數器

嗨我有一個文字區域的characeter計數器。我的問題是它不包括空格或換行符。我該如何做到這一點？angularjs文字區字符計數器

<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>

來源

2013-12-16 user1424508

您應該發佈您的控制器代碼，以便人們可以看到幕後發生了什麼。 – tamakisquare

控制器中沒有任何東西。 span標籤顯示的是1500-createprofilefields.length – user1424508

@tamakisquare不需要控制器代碼......'ng-model'自動創建範圍屬性。在這個例子中沒有關於控制器的信息。這些都是在摘要 – charlietfl

這是因爲angularJS自動修整模型。

如果您使用angularJS 1.1.1或更高版本，請將ng-trim="false"添加到textarea。

工作例如：http://jsfiddle.net/9DbYY/

來源

2013-12-16 03:54:50

+1中完成的，因爲文檔中有很好的深度。 – charlietfl

霍夫解決問題與「符號計數器」就像在你的例子中，如果textarea有驗證指令，如ng-minlength =「5」（無效模型總是空的） – Fisk

不適用於Mac（任何瀏覽器）。我已經測試了同時贏 - 工作就像一個魅力:( –

具有角，textarea有一個叫ngTrim可選參數。根據Angular textarea page：

如果設置爲false，Angular將不會自動修剪輸入。（默認值：真）

用法：

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

下面的代碼說明了如何使用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] h作爲相同的可選ngTrim參數（Angular input page）。

來源

2016-04-19 10:38:30

可以使用具有呼叫NG-變化的函數= 「」

 <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; 
}

來源

2016-08-02 07:48:11

創建一個名爲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和訪問變量numb erOfCharacters

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

來源

2017-03-25 11:20:54 hugsbrugs

angularjs文字區字符計數器

回答

相關問題