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

标签 javascript html angularjs angular-ng-if

我是网络开发人员和 AngularJS 的新手。我正在尝试使用指令 ng-if 仅在从数据库返回的列表大于 1 时显示一个 div block ,但它不起作用。我在滥用指令吗?我环顾四周,没有找到任何有效的解决方案。目前,两个 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>

最佳答案

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

 ng-if="listOfThings.length>1"

ng-if 将计算表达式。

检查这个 Online Demo

关于javascript - Angular 指令 ng-if 不评估条件语句,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23937383/

相关文章:

angularjs - 带有 ngModelController 格式化程序的 Angular 指令

angularjs - 将部分 View 加载到主视图 AngularJS

javascript - 使用 Angular 在鼠标悬停时显示兄弟元素

javascript - 如何使我的网页加载速度更快?

javascript - 如何从 ID 获取对象的名称

javascript - 使用 JavaScript 的 Chrome 和 Safari XSLT

javascript - 使用 element 简化 onclick 函数

javascript - JS/CSS 问题 - Mouseenter 事件在隐藏父元素后不起作用

html - 按钮图标向右浮动不起作用

javascript - 使用 JavaScript 和 HTML 将多个文件下载为文件夹?