Директива ng-include позволяет подгружать нужные файлы, однако иногда рациональнее будет определить фрагменты кода html сразу же
на главной странице и отображать их в зависимости от условий. Для этого предназначена директива ng-switch.
Чтобы применить данную директиву, изменим главную страницу следующим образом:
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="phoneController">
<div ng-repeat="button in modes">
<label>
<input type="radio" ng-model="data.mode" value="{{button.value}}" name="modes" />
{{button.label}}
</label>
</div>
<div ng-switch on="data.mode">
<div ng-switch-when="Tablets">
<ul>
<li ng-repeat="tablet in tablets">
<b>{{tablet.name}}</b>
<p>Цена: {{tablet.price}} $</p>
<p>Производитель: {{tablet.company}}</p>
</li>
</ul>
</div>
<div ng-switch-when="Phones">
<ul>
<li ng-repeat="phone in phones">
<b>{{phone.name}}</b>
<p>Цена: {{phone.price}} $</p>
<p>Производитель: {{phone.company}}</p>
</li>
</ul>
</div>
<div ng-switch-default>
Выберите товары для просмотра
</div>
</div>
</div>
<script src="js/lib/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
</script>
<script src="js/controllers/phonesController.js"></script>
</body>
</html>
Контроллер phonesController остается тем же, что и в прошлой теме.
Радиокнопки реализованы также, как и в прошлой теме: они устанавливают через привязку ng-model="data.mode" значение объекта
data.mode.
Использование директивы ng-switch напоминает конструкцию switch..case, которая есть во многих языках программирования.
Директива используется вместе с атрибутом on, который указывает на выражение. В данном случае выражением является значение
объекта data.mode.
Для оценки значения data.mode используется директива ng-switch-when:
<div ng-switch-when="Tablets"> <!--код, если data.mode Tablets --> </div> <div ng-switch-when="Phones"> <!--код, если data.mode Phones --> </div>
И если data.mode="Tablets", то срабатывает код в блоке <div ng-switch-when="Tablets">, иначе выполнение идет дальше до того места,
где директива ng-switch-when будет содержать нужное значение.
Фактически здесь в элементы с директивой ng-switch-when вставляются те же файлы phonesList.html и tabletsList.html, которые использовались в прошлой теме.
Если же ни одна директива ng-switch-when не содержит правильного значения, то срабатывает блок с директивой ng-switch-default:
<div ng-switch-default> Выберите товары для просмотра </div>
В нашем случае изначально не выбрана ни одна радиокнопка, поэтому объект data.mode не будет иметь при старте никакого значения. А это значит,
что как раз сработает блок с директивой ng-switch-default
Таким образом, действие директивы ng-switch во многом похоже на действие ng-include, только ng-switch для вставки небольших кусков html-кода, в то время как
ng-include применяется для вставки больших и более сложных участков разметки html.