Angular 指令 ng-if 不评估条件语句 [英] Angular directive ng-if does not evaluate conditional statement

问题描述

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

<div ng-if="listOfThings.length > 1"><h1>{{listOfThings.length}} </h1></br><div ng-repeat="listOfThings 中的事物"><标签>{{ thing.name }} </label>

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

我尝试了这段代码，它在 Plunker 中有效，但由于某种原因在我的代码中无效.在我的代码中，只有 ng-app 有效，但 ng-if 仍然无效.

 
点击我:<input type="text" ng-model="check" ng-init="check='show'"/><br/>检查时显示:{{check}}<input ng-if="check!='hide'" class="animate-if" placeholder="输入'隐藏'这个词"/>

解决方案

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

 ng-if="listOfThings.length>1"

ng-if 将计算表达式.

查看此在线演示

I'm new to web dev and AngularJS. I'm trying to use the directive ng-if to only display a div block if a list returned from the database is greater than 1, but it's not working. Am I misusing the directive? I've looked around and haven't found any solutions that work. Currently, both divs are displayed and the ng-ifs are ignored.

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

I tried this code, which works in Plunker, but not in my code for some reason. In my code, only ng-app works, but ng-if still does not.

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

解决方案

What you want instead of this ng-if="{{listOfThings.length}} > 1" is this:

 ng-if="listOfThings.length>1"

ng-if will evaluate the expression.

Check this Online Demo

这篇关于Angular 指令 ng-if 不评估条件语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！