angularjs текстовая область счетчик символов

Привет У меня есть счетчик символов для текстовой области. Моя проблема заключается в том, что он не учитывает пробелы или разрывы строк. Как я могу сделать так, чтобы он это сделал?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' автоматически создает свойство scope. В этом случае ничего не видно о контроллере. Все это сделано в дайджесте – charlietfl

Это потому, что угловой JS автоматически обрезает вашу модель.

Если вы используете 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:

Если установлено значение «ложь», угловое устройство не будет автоматически обрезать входной сигнал. (по умолчанию: правда)

Использование:

<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

вы можете использовать функцию с вызова нг-изменения = ""

 <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 текстовая область счетчик символов

ответ

Смежные вопросы