ngIf 总是评估为真

Question

我正在开发一个 AngularJS 应用程序，使用 v1.3.9。我有几个 ng-if 指令总是评估为真，我不知道为什么。

<tr data-ng-repeat="line in chat">
                    <td class="message-timestamp">{{line.time | date:'short'}}</td>
                    <div ng-if="line.type === 'gist'">
                        <td class="message-nick">{{line.nick}}</td>
                        <td class="message-text">{{line.message}}
                            <p>
                                <code ng-show="showGist" walrus-auto-gistify data-gist-id="{{line.options[0]}}"></code>
                                <br>
                                <button ng-click="showGist = !showGist" class="btn btn-primary btn-xs">Show/Hide</button>
                            </p>
                        </td>
                    </div>
                    <div ng-if="false">
                        <td class="message-nick"><span class="glyphicon glyphicon-arrow-right"></span></td>
                        <td class="message-text">{{line.message}}</td>
                    </div>
                </tr>

当我运行执行此操作时，两个 ng-if 指令都被评估为真，因此两个 div 都会显示。

chat 只是一个对象数组。

Answer 1

我很确定这与您有一个 <div> 作为 <tr> 的直接子代这一事实有关。我过去遇到过这种类型的设计问题，它会导致奇怪的行为。

一个解决方案是将 <div> 放在 <td> 中，如下所示：

<tr data-ng-repeat="line in chat">
    <td class="message-timestamp">{{line.time | date:'short'}}</td>
    <td class="message-nick">
        <div ng-if="line.type === 'gist'">{{line.nick}}</div>
        <div ng-if="line.type !== 'gist'"><span class="glyphicon glyphicon-arrow-right"></span></div>
    </td>
    <td class="message-text">
        <div ng-if="line.type === 'gist'">
            <p>
                <code ng-show="showGist" walrus-auto-gistify data-gist-id="{{line.options[0]}}"></code>
                <br />
                <button ng-click="showGist = !showGist" class="btn btn-primary btn-xs">Show/Hide</button>
            </p>
        </div>
        <div ng-if="line.type !== 'gist'">{line.message}}</div>
    </td>
</tr>

编辑： 尝试 JSFiddle here

ngIf 总是评估为真

ngIf always evaluates as true

javascript

angularjs

nw.js