angularjs if else条件不起作用

时间:2017-09-12 10:07:34

标签: angularjs angularjs-ng-if

我是AngularJS的新手,正在处理项目中的一个小模块。我想根据条件显示两个div。条件是如果{{ merchandiser.popCode }}表示数据库中存在popcode值,则显示div1 else显示div2。这是我的代码片段

<tr ng-repeat="merchandiser in data.merchandisers  | filter: filter()">
        <td title = "({{ merchandiser.id }})">{{ $index + 1 }}</td>
        <td>{{ merchandiser.createdOnDate }}</td>
        <!--<td>{{ merchandiser.createdOnTime }}</td>-->
        <td>{{ merchandiser.pjpCode }} </td>
        <td>{{ merchandiser.sectionCode}}</td>
        <td>{{ merchandiser.popCode }}</td>
        <td>{{ merchandiser.popName }}</td>
        <td>{{ merchandiser.popStatus }} </td>
        <td>{{ merchandiser.channel }} </td>
</table>
<div class="row">


      <div id = "div1" class = "col-sm-4" >

        <table class = "table">
          <tr class="colour">
            <th>POP Classification</th>
            <td>{{ popData.popClassification }}</td>
          </tr>
          <tr>
            <th class="colour">Owner's Name</th>
            <td>{{ popData.ownerName }}</td>
          </tr>
          </div>
 <div id = "div2" class = "col-sm-4" >

    <table class = "table">

      <tr>enter code here
        <th class="colour">Owner's Name</th>
        <td>{{ popData.ownerName }}</td>
      </tr>
      </div>

2 个答案:

答案 0 :(得分:1)

您可以将ng-if用于Angular模板中的if(){..} else {..}逻辑。

根据您目前的情况,

<div id="div1" ng-if="merchandiser.popCode">
<!-- If block i.e div1 -->
</div>
<div id="div2" ng-if="!merchandiser.popCode">
<!-- Your Else Block i.e div2 -->
</div>

答案 1 :(得分:1)

试试这个:

<div id="div1" ng-if="merchandiser.popCode">
<!-- Condition true show Div1 block content -->
</div>
<div id="div2" ng-if="!merchandiser.popCode">
<!-- Condition false show Div2 block content -->
</div>