Как сделать логическую операцию в угловом шаблоне

Question

Как сделать логическую операцию в угловом шаблоне

0

Все:

Интересно, как я могу установить оператор OR в строке HTML в шаблоне Angualar, например:

<div>{{value || <h6>No Header for now.</h6>}}</div>

Логика заключается в том, что если значение является строкой, но не определено, мы показываем текст значения, в противном случае мы показываем ошибку "Нет заголовка для сейчас", завернутую в <h6>.

Я не знаю, почему это выражение нельзя правильно интерпретировать?

благодаря

Kuan 19 апр. 2016, в 23:01

Источник

0

Здравствуйте! Пожалуйста, примите мой ответ, если он решит вашу проблему. :) Как работает прием ответа?
GG. 25 апр. 2016, в 20:23
0

@GG. Спасибо, я дал ответ на ответ, потому что это помогает.
Kuan 25 апр. 2016, в 20:42

Теги:

angularjs

2 ответа

Ещё вопросы

Здравствуйте! Пожалуйста, примите мой ответ, если он решит вашу проблему. :) Как работает прием ответа?
@GG. Спасибо, я дал ответ на ответ, потому что это помогает.

GG. · Answer 1 · 2016-04-19T19-23-00.000Z

Это можно решить с помощью ng-if:

<div ng-if="value">value</div>
<div ng-if="!value"><h6>No Header for now.</h6></div>

Вы можете добавлять определенные атрибуты (например, class) и/или директивы (например, ng-click) для каждого <div>.

Проблема с использованием одного элемента заключается в том, что вы должны повторять свое условие несколько раз:

<div ng-class="{ value: 'class1', !value: 'class2' }"
     ng-click="value ? action1() : action2()"
     ng-bind-html="value || html">
</div>

Спасибо, это также, как я решаю это прямо сейчас, просто вычурно, как это сделать в моем вопросе
Хорошо, хорошо! Я отредактировал свой ответ, добавив, на мой взгляд, недостаток, состоящий в том, чтобы содержать условие с одним элементом. Надеюсь, это поможет вам. :)

Pierre Emmanuel Lallemant · Answer 2 · 2016-04-19T17-39-00.000Z

Вы должны поместить строку, а не выражение: <h6>No Header for now.</h6> - недопустимое выражение js. '<h6>No Header for now.</h6>' - строка и может отображаться в {{}}.

<div>{{value || '<h6>No Header for now.</h6>' }}</div>

или

<div>{{value != null? value: '<h6>No Header for now.</h6>' }}</div>

Я убежден, что 2-й работает.

РЕДАКТИРОВАТЬ:

Если вы хотите добавить html-код в {{}}, это еще одна проблема. См. AngularJS: Вставьте HTML в поле зрения, фильтр "sanitize" во втором ответе должен помочь вам (назовите {{ '<h1>test</h1>' | sanitize }} и он должен работать.

EDIT 2:

В файле js:

angular.module('yourapp')
.filter("sanitize", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

Ввиду:

<div>{{value || '<h6>No Header for now.</h6>' | sanitize }}</div>

Не знаю, нужен ли вам 'ngResource' для использования $ sce, если он не работает, вам нужно будет установить угловой ресурс:/

Спасибо, но я думаю, что я должен что-то пропустить, когда я использую ваше, оно просто показывает выражение в виде простого текста (но стиль h6 работает)
отредактировано, это другая проблема :)
Спасибо, не могли бы вы показать мне, как это выглядит в моем случае?