Условная логика в шаблоне AngularJS

у меня есть угловой шаблон, который выглядит так...

<div ng-repeat="message in data.messages" ng-class="message.type">

    <div class="info">
        <div class="type"></div>
        <div class="from">From Avatar</div>
        <div class="createdBy">Created By Avatar</div>
        <div class="arrowTo">
            <div class="arrow"></div>
            <div class="to">To Avatar</div>
        </div>
        <div class="date">
            <div class="day">25</div>
            <div class="month">Dec</div>
        </div>
    </div>

    <div class="main">
        <div class="content">
            <div class="heading2">{{message.title}}</div>
            <div ng-bind-html="message.content"></div>
        </div>

    </div>

    <br />
    <hr />
    <br />

</div>

Я создал в JSfiddle чтобы показать привязку данных.

что мне нужно сделать, это сделать "От", "До" и "arrowTo" divs показывают условно, в зависимости от содержания данных.

журнал это...

  • если в данных есть объект "from", то покажите div" from " и свяжите данные, но не показывайте div "createdBy .
  • если нет объекта "from", но есть объект" createdBy", то покажите div" createdBy " и свяжите данные.
  • если в данных есть объект "to", то покажите div" arrowTo " и свяжите его данные.

или на простом английском языке, если есть адрес from, покажите его, иначе покажите, кто создал запись вместо этого, и если есть адрес, то покажите это тоже.

Я изучил использование ng-switch, но я думаю, что мне придется добавить дополнительная разметка, которая оставила бы пустой div, если бы не было данных. Плюс мне нужно будет вложить директивы переключения, и я не уверен, что это сработает.

какие идеи?

обновление:

Если бы я написал свою собственную директиву (если бы я знал, как!) тут вот некоторые псевдо-код, чтобы показать, как я хотел бы использовать его...

<div ng-if="showFrom()">
    From Template Goes Here
</div>
<div ng-if="showCreatedBy()">
    CreatedBy Template Goes Here
</div>
<div ng-if="showTo()">
    To Template Goes Here
</div>

каждый из них исчезнет, если функция/выражение оценивается как false.

3 66
javascript angularjs

3 ответа:

угловой 1.1.5 ввел НГ-если

86

можно использовать ngSwitch:

app.directive('conditionalTemplate', function($http, $compile) {
   return {
      restrict: 'E',
      require: '^ngModel',
      link: function(sope, element, attrs, ctrl) {
        // get template with $http
        // check model via ctrl.$viewValue
        // compile with $compile
        // replace element with element.replaceWith()
      }
   };
});
20

вы можете использовать ng-show на каждом элементе div в цикле. Это то, что вы хотели:http://jsfiddle.net/pGwRu/2/ ?

<div class="from" ng-show="message.from">From: {{message.from.name}}</div>
6