angular:angularjs:directive:ng-switch []

Это старая версия документа!

Директива ng-switch

Директива 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.

Инструменты пользователя

Инструменты сайта

Боковая панель

Директива ng-switch

Инструменты страницы