Сделать условие рендеринга с помощью AngularJS

Ответ 1

Обновление для angularjs 1.1.5 и выше пользователей (не поддерживается в 1.0.7):

Связанный коммит: https://github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944

Angular теперь имеет условную директиву рендеринга: ngIf.

Использование:

<div ng-if="conditional_expression"></div>

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

Документация: директива-ngIf

Для устаревших пользователей angularjs:

ngShow условно скрывает/показывает элемент. Это будет изменено в одном из новых стабильных выпусков, теперь оно доступно в релизе unstable, как и в 1.1.5.

Если вы хотите условно добавить/удалить элементы в DOM, используйте ngSwitch.

<div ng-switch="showMe">
    <div ng-switch-when="true">Hello!</div>
</div>

На самом деле, эта директива была создана для обработки случаев более чем на 1, но вы также можете использовать ее так. См. этот ответ на примерах более сложных обычаев.

Ответ 2

Рекомендуемый способ - использовать ng-include

Пример: http://jsfiddle.net/api/post/library/pure/

<div ng-app="">
  <div ng-controller="Ctrl">
    <select ng-model="template" ng-options="t.name for t in templates">
     <option value="">(blank)</option>
    </select>
    url of the template: <tt>{{template.url}}</tt>
    <hr/>
    <div ng-include src="template.url"></div>
  </div>


  <!-- template1.html -->
  <script type="text/ng-template" id="template1.html">
    Content of template1.html
  </script>

  <!-- template2.html -->
  <script type="text/ng-template" id="template2.html">
    Content of template2.html
  </script>
</div>

Ответ 3

Есть как минимум два способа сделать это:

• сделать частичное использование шаблонов
• используйте простое выражение с условной функцией рендеринга (см. эту скрипту и описание ниже)

Для простых компонентов я рекомендую придерживаться функции рендеринга. Очень легко понять.

$scope.render = function(condition) {        
   return condition ? "This is rendered when condition == TRUE" : "This is rendered when condition == FALSE";
};

и просто включите его в свой HTML, например:

{{render(true)}}

Вы можете также обернуть это с помощью директивы angular, которая даст вам очень приятную разметку и неограниченные возможности!

Ответ 4

Посмотрите angular-ui if директива. Я считаю, что это хорошо послужит вам цели.