Angular指令ng-if不能评估条件语句

Question

我刚接触网页开发和AngularJS。我想使用ng-if指令，只有当从数据库返回的列表大于1时才显示一个div块，但它不起作用。我是否误用了该指令？我找过一些解决方案，但都无法解决问题。目前，两个div都显示出来，ng-if被忽略。

<div>
    <div ng-if="listOfThings.length > 1">
        <h1> {{listOfThings.length}} </h1>
        </br>
        <div ng-repeat="thing in listOfThings">
           <label> {{ thing.name }} </label>
        </div>
    </div>
    <div ng-if="listOfThings.length == 1" class="col-sm-4 col-sm-offset-4">
        <h1> {{ listOfThings[0].name }} </h1>
        <iframe width="560" height="315" ng-src="{{ listOfThings[0].embed }}" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

我尝试了这段代码，它在Plunker上可以正常工作，但在我的代码中却不能。在我的代码中，只有ng-app可以使用，但ng-if仍然无法正常工作。

    <div ng-app="ngAnimate">
        Click me: <input type="text" ng-model="check" ng-init="check='show'" /><br/>
        Show when check: {{check}}
        <input ng-if="check!='hide'" class="animate-if" placeholder="type the word 'hide'"/>
    </div>

- Soubriquet

Answer 1

你需要的不是这个 ng-if="{{listOfThings.length}} > 1"，而是这个：

 ng-if="listOfThings.length>1"

ng-if会对表达式进行评估。

可以查看这个在线演示

- Dalorzo

---

我尝试了你的建议，但仍然显示两个div。 - Soubriquet

@Soubriquet，这里有一个Plunker演示，它可以正常工作。你能否向我展示你的代码？ - Dalorzo

好的，所以我复制了你链接的 Plunker 代码到我的 HTML 中，但 ng-if 仍然不起作用，但 np-app 是可以工作的。:/ 我编辑了原帖以展示我尝试过的 Plunker 代码。 - Soubriquet

没关系。感谢你的所有帮助。在查看 Plunker 代码后，我意识到我下载了 AngularJS 1.3.0 版本，而我加载的是旧版本。再次感谢。现在它可以工作了。 - Soubriquet

Answer 2

这应该可以

<div>
    <div ng-if="listOfThings.length > 1">
        <h1> {{listOfThings.length}} </h1>
        </br>
        <div ng-repeat="thing in listOfThings">
           <label> {{ thing.name }} </label>
        </div>
    </div>
    <div ng-if="listOfThings.length == 1" class="col-sm-4 col-sm-offset-4">
        <h1> {{ listOfThings[0].name }} </h1>
        <iframe width="560" height="315" ng-src="{{listOfThings[0].embed}}" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

- Mathews

---

@Matthews，你能否解释一下这是如何加起来考虑到这不是已经发布的答案的副本？ - Dalorzo