限制Textarea中的行數（或行數）

Question

我在jQuery和JS中看到過關於此的一些示例。

http://jsfiddle.net/XNCkH/17/

我一直在尋找周圍，我可以看到，你可以限制長度（見小提琴）。我想知道是否有辦法限制AngularJS中的行數或行數，或者字符長度是否要走？

http://jsfiddle.net/7nxy4sxx/

<textarea ng-model="test" ng-trim="false" maxlength="1500"></textarea> 

謝謝！ 牛逼

Answer 1

這裏是我想出了，用在AngularJS 1.3支新ngModel.$validators管道工作指令：

/* 
maxlines attribute directive, specify on a <textarea> to validate the number 
of lines entered is less than the specified value. 

Optional attributes: 
    maxlines-prevent-enter: Specify as false to NOT block the pressing of the Enter 
    key once the max number of lines has been reached. 
*/ 

app.directive('maxlines', function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, elem, attrs, ngModel) { 
     var maxLines = 1; 
     attrs.$observe('maxlines', function(val) { 
     maxLines = parseInt(val); 
     }); 
     ngModel.$validators.maxlines = function(modelValue, viewValue) { 
     var numLines = (modelValue || '').split("\n").length; 
     return numLines <= maxLines; 
     }; 
     attrs.$observe('maxlinesPreventEnter', function(preventEnter) { 
     // if attribute value starts with 'f', treat as false. Everything else is true 
     preventEnter = (preventEnter || '').toLocaleLowerCase().indexOf('f') !== 0; 
     if (preventEnter) { 
      addKeypress(); 
     } else { 
      removeKeypress(); 
     } 
     }); 

     function addKeypress() { 
     elem.on('keypress', function(event) { 
      // test if adding a newline would cause the validator to fail 
      if (event.keyCode == 13 && !ngModel.$validators.maxlines(ngModel.$modelValue + '\n', ngModel.$viewValue + '\n')) { 
      event.preventDefault(); 
      } 
     }); 
     } 

     function removeKeypress() { 
     elem.off('.maxlines'); 
     } 

     scope.$on('$destroy', removeKeypress); 
    } 
    }; 
}); 

Working Plunkr

注：這不限制數量如果用戶粘貼的行數超過允許的行數，則會將該行正確標記爲無效。