ng-hide 在字段变为无效时自动触发答案

【问题标题】：ng-hide automatically triggering on field becoming invalidng-hide 在字段变为无效时自动触发
【发布时间】：2014-09-26 23:06:56
【问题描述】：

我有一个文本区域，我在其上应用了 angular 的最大长度指令：

<textarea placeholder="Quote text here" ng-model="quote.text" ng-maxlength="400" name="text"></textarea>

现在我还通过使用角度 ng-show 和 ng-hide 指令来显示字数：

<div class="row word-count">
   <h5>Word count :</h5>
   <h5 ng-show="quote.text.length > 0">{{quote.text.length}}</h5> 
   <h5 ng-hide="quote.text.length > 0" class="ng-hide">0</h5>
</div>

问题在于，一旦字数超过最大长度指令，ng-show 和 ng-hide 就会自动触发为反向。有没有办法阻止它？

【问题讨论】：

您在处理负长度吗？为什么有 ng-show 和 ng-hide？只需打印出quote.text.length。没有单词的时候会是0，对吧？您只需要将默认文本清空即可。

标签： angularjs angularjs-directive

【解决方案1】：

使用旧的 HTML maxlength 怎么样？

<textarea placeholder="Quote text here" ng-model="quote.text." name="text" maxlength="400"></textarea>

<div class="row word-count">
    <h5>Word count :</h5>
    <h5 ng-show="quote.text.length > 0">{{ quote.text.length }}</h5> 
    <h5 ng-hide="quote.text.length > 0" class="ng-hide">0</h5>
</div>

我个人不理解ng-maxlength 的必要性，因为它只是返回错误，但允许您继续输入！

【讨论】：

对 textarea 元素的最大长度支持是相当新的。例如它在 IE8/IE9 中不起作用。
啊，我明白了。感谢您的信息
感谢您的输入，因为我正在构建一个 cordova 应用程序，所以它只需要在 webkit 中工作

【解决方案2】：

这是角度验证的预期行为。如果验证失败，则对应的模型返回 undefined。

您可以在 Angular 网站here 上试用。

另外，如果你需要支持 IE8/IE9，here is an example of own maxlength directive。

【讨论】：