angularjs - Angularjs if/else 语句

Question

<div class="company_name" ng-controller="CompanyName">
 <h1 class="left">
     {{data.company_name}}
 </h1>
</div>

我想做的是，如果 data.company_name 没有通过输入字段添加，它会显示一个占位符“公司名称”，如何使用 angularjs 来完成？

Answer 1

您可以使用ng-if并执行类似的操作

<div class="company_name" ng-controller="CompanyName">
 <h1 class="left">
     <span ng-if="data.company_name === ''">
       // Some placeholder
     </span>
     <span ng-if="data.company_name !== ''">
       {{data.company_name}}
     </span>
 </h1>
</div>

BTW ngIf 是 v1.1.5 中添加的新指令，因此您可能需要升级 Angular 版本

在这里查看我的 plunker：http: //plnkr.co/edit/qiN2XshEpay6e6zzhUKP

Answer 2

保持代码干净的一种方法是使用过滤器。这段代码将一个类添加到一个活动选项卡。

var filters = angular.module('filters');
filters.filter('ie', function(){
  return function(v, yes, no){
      return v ? yes : no;
  };
});

模板

<li class="{{activeTab == 'home' | ie: 'active-class':''}}">
    Home
</li>

Answer 3

对于 Using ng-if, ng-else-if, andng-else在你的项目中使用这个：

https://github.com/zachsnow/ng-elif

Answer 4

您可以使用ng-if条件检查公司名称 vlaue。让我们举个例子

 <span ng-if="driver.status_flag == 1">
    <i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
 </span>

在上面的示例中，我添加了条件 status_flag 值为 1，然后将显示内部跨度值。与您的案例相同，您可以添加如下语句

<span ng-if="data.company_name === ''">
        <i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
     </span>