Условные обозначения в угловых шаблонах

Question

В настоящее время я разрабатываю приложение с использованием ионного (1.3)/углового (1.5). Это мой первый раз, используя угловые, но я развивался с ember.js в течение последних двух или трех лет.

Я немного смущен, как я могу условно отображать материал в шаблонах: в уголек, я бы

<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

попробовать это, здесь работает 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; 
} 

Answer 2

Существует еще один способ для достижения этой цели, как показано в коде ниже: -

<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>