Question

我是棱角分明的新手，请耐心等待。我的textarea中有一个字符计数器和字计数器。我的问题是每次按空格时，它都会被getWordCounter函数计算。我怎样才能解决这个问题？提前谢谢。

HTML：

<textarea id="notesContent" type="text" class="form-control" rows="10" ng-model="notesNode.text" ng-trim="false" maxlength="5000"></textarea>

<span class="wordCount">{{getWordCounter()}}</span>
<span style="float:right">{{getCharCounter()}} / 5000</span>

JS：

$scope.getCharCounter = function() {
   return  5000 - notesNode.text.length;
}

$scope.getWordCounter = function() {
   return $.trim(notesNode.text.split(' ').length);
}

Answer 1

好像你需要打电话来修剪＆＃39;在调用split之前，像这样：

$scope.getWordCounter = function() {
    return notesNode.text.trim().split(' ').length;
}

如果要支持单词之间的多个空格，请改为使用正则表达式：

$scope.getWordCounter = function() {
    return notesNode.text.trim().split(/\s+/).length;
}

过滤器实现

您还可以将wordCounter实现为过滤器，以便在不同的视图中重用：

myApp.filter('wordCounter', function () {
    return function (value) {
        if (value && (typeof value === 'string')) {
            return value.trim().split(/\s+/).length;
        } else {
            return 0;
        }
    };
});

然后，在视图中，使用它：

<span class="wordCount">{{notesNode.text|wordCounter}</span>

请参阅Example on JSFiddle

Answer 2

对于您的问题，这是一个更高级的答案，因为它可以作为指令重复使用：

var App = angular.module('app', []);

App.controller('Main', ['$scope', function($scope){
  var notesNode = {
    text: '',
    counter: 0
  };

  this.notesNode = notesNode;
}]);

App.directive('counter', [function(){
  return {
    restrict: 'A',
    scope: {
      counter: '='
    },
    require: '?ngModel',
    link: function(scope, el, attr, model) {
      if (!model) { return; }
      model.$viewChangeListeners.push(function(){
        var count = model.$viewValue.split(/\b/g).filter(function(i){
          return !/^\s+$/.test(i);
        }).length;

        scope.counter = count;
      });
    }
  };
}]);

和HTML

<body ng-app="app">
<div ng-controller="Main as main"></div>
  <input type="text" ng-model="main.notesNode.text" class="county" counter="main.notesNode.counter">
  <span ng-bind="main.notesNode.counter"></span>
</body>

在此处查看http://plnkr.co/edit/9blLIiaMg0V3nbOG7SKo?p=preview

它会创建一个双向数据绑定到计数应该去的位置，并自动为您更新。无需在示波器和控制器代码中进行额外铲除，而且可以在任何其他输入中重复使用。

angularjs中的字计数器

2 个答案:

过滤器实现