4

我是网络开发和 AngularJS 的新手。如果从数据库返回的列表大于 1，我正在尝试使用指令 ng-if 仅显示 div 块，但它不起作用。我在滥用指令吗？我环顾四周，没有找到任何可行的解决方案。目前，两个 div 都被显示并且 ng-ifs 被忽略。

<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>
4

2 回答 2

8

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

 ng-if="listOfThings.length>1"

ng-if将评估表达式。

检查此在线演示

于 2014-05-29T15:48:10.030 回答
0

这应该做

<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>
于 2014-05-29T15:52:32.147 回答