Question

我目前正在使用离子（1.3）/角度（1.5）开发应用程序。这是我第一次使用angular，但过去两三年我一直在用ember.js开发。

我对如何在模板中有条件地显示内容感到有点困惑：在ember中，我会这样做

<div class="col-xs-12">
  {{#if condition}}
    some template..
  {{else}}
    something else
  {{/if}}
</div>

但在角度上，在我看来，你必须这样做：

<div class="col-xs-12" ng-if="condition">
  some template..
</div>
<div class="col-xs-12" ng-if="!condition>
  something else
</div>

对我来说这看起来真的很麻烦，并没有真正表达出意图。有没有其他（更好的）方法在模板中有条件地显示内容？

非常感谢你的时间！

Answer 1

还有一种方法可以实现这一点，如下面的代码所示： -

<div ng-switch="myVar">
  <div ng-switch-when="condition1">
     some tempelate....
  </div>
  <div ng-switch-when="condition2">
     some tempelate....
  </div>
  <div ng-switch-when="condition3">
     some tempelate....
  </div>
  <div ng-switch-default>
     some fallback template ...
  </div>
</div>

Answer 2

试试这个，这里有效fiddle

<div ng-controller="MyCtrl">
 <div class="col-xs-12" ng-show="condition">
  some template..
 </div>
 <div class="col-xs-12" ng-show="!condition">
  something else
</div>
</div>

控制器，尝试使用更改$scope.condition=false

 var myApp = angular.module('myApp',[]);
  function MyCtrl($scope) {
   $scope.condition = true;
   //$scope.condition = false;
 }

角度模板中的条件

2 个答案: