如何使用angularjs在html中获取textarea行数？

Posted 2023-05-07

技术标签:

【中文标题】如何使用angularjs在html中获取textarea行数？【英文标题】：How to get textarea rows count in html using angularjs? 【发布时间】：2019-06-27 23:51:39 【问题描述】：

是否可以使用angularjs 在html 中获取textarea row count？

下面是javascript 获取行数的方法。

console.log(document.getElementById('field_id').rows)

下面的代码不起作用，但和它类似，只是使用前端？

mainCtrl.header.modelName.rows

【问题讨论】：

【参考方案1】：

以下是您可以使用 angularjs 获取的两种类型的 textarea 行数：

固定行 - 为 textarea 元素预先定义动态行 - 可以根据添加到 textarea 元素的新行进行更改。

angular.module("app", []).controller("ctrl", function($scope) 
  $scope.fixedRows = angular.element(document.querySelector("#txt-area")).attr("rows");

  $scope.getDynamicRows = function() 
    var ele = angular.element(document.querySelector("#txt-area"));
    return ele.val().split(/\r|\r\n|\n/).length;
  

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">
  <textarea id="txt-area" rows="10" cols="50" type="text" ng-model="textValue"></textarea>
  <p>Fixed Rows Count = fixedRows, Dynamic Rows Count = getDynamicRows()
   </p>
</body>

【讨论】：

为什么要添加 jQuery 依赖？我删除了它，但必须更新 angular.element 以期望 document.querySelector("#txt-area") 而不是直接使用元素引用。