通过 Angularjs 更新文本区域行

Question

我想调整焦点上文本区域中的行数，以便在模糊时移除它们。此外，在聚焦时我想显示一个隐藏的 div 层。我目前的解决方案是

<textarea class="form-control" rows="1" placeholder="Please enter text..." 
onfocus="this.rows=3" ng-focus="isVisible = !isVisible" onblur="this.rows=1" 
ng-blur="isVisible = !isVisible"></textarea>

正如您从上面看到的，我必须使用两个属性，即 HTML onfocus 来增加行数和 ng-focus 来更新 isVisible（显示和隐藏 div）。它有效，但我想知道是否可以仅使用 ng-focus 和 ng-blur 来增加和减少行数。

Div层我正在显示和隐藏

<div class="row" ng-show="isVisible" />

提前致谢

Answer 1

基本上您可以使用 ng-attr-rows 来动态设置 rows 属性值。你可以有类似下面的内容。

基本上在每个摘要周期 ng-attr-* 指令评估其表达式，在您的情况下 * 是 rows，并将评估的值添加到行属性。

标记

<textarea ng-model="test" 
   ng-attr-rows="{{row || '1'}}" 
   ng-focus="row=3" 
   ng-blur="row=1">
</textarea>

Demo Plunkr

通过 Angularjs 更新文本区域行

Update textarea rows via Angularjs

html

angularjs

angular-ui-bootstrap