如何在angularJS中使用ng-if，ng-else

Posted 2021-03-26

我想比较id.here如果id等于5这样做，否则就这样做。我怎样才能做到这一点？

<div class="case" data-ng-if="data.id === '5' ">
    <input type="checkbox" id="{{data.id}}" value="{{data.displayName}}"
            data-ng-model="customizationCntrl.check[data.id1]"
            data-ng-checked="{{data.status}}=='1'" onclick="return false;">{{data.displayName}}
        <br>
</div>
<div class="case" data-ng-else>
    <input type="checkbox" id="{{data.id}}" value="{{data.displayName}}"
            data-ng-model="customizationCntrl.check[data.id]"
            data-ng-checked="{{data.status}}=='1'">{{data.displayName}}<br>
</div> 

答案

使用带有表达式的ng-switch和用于匹配表达式值的ng-switch-when：

<div ng-switch="data.id">
  <div ng-switch-when="5">...</div>
  <div ng-switch-default>...</div>
</div>

Example is here

Angular2 example

另一答案

ng-else没有指令

您可以使用ng-if在angularJs中实现if（）{..} else {..}。

对于你目前的情况，

<div ng-if="data.id == 5">
<!-- If block -->
</div>
<div ng-if="data.id != 5">
<!-- Your Else Block -->
</div>

另一答案

在角度为ng if else的语法是：

<div class="case" *ngIf="data.id === '5'; else elsepart; ">
    <input type="checkbox" id="{{data.id}}" value="{{data.displayName}}" 
    data-ng-model="customizationCntrl.check[data.id1]" data-ng-checked="
    {{data.status}}=='1'" onclick="return false;">{{data.displayName}}<br>
</div>
<ng-template #elsepart>
    <div class="case">
        <input type="checkbox" id="{{data.id}}" value={{data.displayName}}"  
        data-ng-model="customizationCntrl.check[data.id]" data-ng-checked="
        {{data.status}}=='1'">{{data.displayName}}<br>
    </div> 
</ng-template>

另一答案

我正在补充一些关于ng指令的重要问题： -

1. 指令将响应它执行的相同位置。
2. ng-else概念不存在，你可以只用if或者其他类似switch的语句。

看看下面的例子： -

<div ng-if =“data.type =='FirstValue'”>

//different template with hoot data

</ DIV>

<div ng-if =“data.type =='SecondValue'”>

  //different template with story data

</ DIV>

<div ng-if =“data.type =='ThirdValue'”>

 //different template with article data

</ DIV>

根据数据类型，它将呈现任何一个div。

另一答案

您也可以尝试三元运算符。像这样的东西

{{data.id === 5 ? "it's true" : "it's false"}}

稍微改变你的html代码并尝试这个希望，这样它将适合你。

另一答案

<span ng-if="verifyName.indicator == 1"><i class="fa fa-check"></i></span>
<span ng-if="verifyName.indicator == 0"><i class="fa fa-times"></i></span>

试试这段代码。这里的verifyName.indicator值来自控制器。这对我有用。

另一答案

你可以这样写：

<div class="case" ng-if="mydata.id === '5' ">
    <p> this will execute </p>
</div>
<div class="case" ng-if="mydata.id !== '5' ">
    <p> this will execute </p>
</div>