javascript - 不能在 ng-class 上重复相同的条件两次

Question

我有以下代码...

<div class="row">
    <div class="col-md-5">
        <span>
            Comments
        </span>
    </div>

    @*<div class="col-md-7">*@
    <div class="col-md-7" ng-class="{'has-error': TaskObject.Comments.length > 500}">
        <textarea class="form-control" ng-model="TaskObject.Comments" maxlength="500"></textarea>
    </div>
</div>    

在其他地方我使用了相同的元素

<div class="row">
    <div class="col-md-5">
        <span>
            Comments
        </span>
    </div>

    @*<div class="col-md-7">*@
    <div class="col-md-7" ng-class="{'has-error': TaskObject.Comments.length > 500}">
        <textarea class="form-control" ng-model="TaskObject.Comments" maxlength="500"></textarea>
    </div>
</div>

问题是，当我运行该网站时，它抛出以下异常:

Uncaught Error: Syntax error, unrecognized expression: div[ng-class='{'has-error': TaskObject.Comments.length

但是，我注意到，如果我删除我喜欢的任何内容，或者事件添加一个 ;在其中一个条件结束时，错误消失。

关于为什么会发生这种情况有什么想法吗？

Answer 1

最初的 TaskObject.Comments 为 null 并且 null 没有 length 属性。

在ng-class中添加额外的检查

像这样

 ng-class="{'has-error': TaskObject.Comments && TaskObject.Comments.length > 500}"