angular:angularjs:directive:ng-switch []

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
=====Директива ng-switch=====

Директива //ng-include// позволяет подгружать нужные файлы, однако иногда рациональнее будет определить фрагменты кода html сразу же на главной странице и отображать их в зависимости от условий. Для этого предназначена директива **ng-switch**.\\
\\
Чтобы применить данную директиву, изменим главную страницу следующим образом:

<code html>
<!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>
</code>

Контроллер phonesController остается тем же, что и в прошлой теме.\\
\\
Радиокнопки реализованы также, как и в прошлой теме: они устанавливают через привязку ng-model="data.mode" значение объекта data.mode.\\
\\
Использование директивы //ng-switch// напоминает конструкцию switch..case, которая есть во многих языках программирования. Директива используется вместе с атрибутом on, который указывает на выражение. В данном случае выражением является значение объекта data.mode.\\
\\
Для оценки значения data.mode используется директива //ng-switch-when//:

<code html>
<div ng-switch-when="Tablets">
    <!--код, если data.mode Tablets -->
</div>
<div ng-switch-when="Phones">
    <!--код, если data.mode Phones -->
</div>
</code>
И если data.mode="Tablets", то срабатывает код в блоке %%<div ng-switch-when="Tablets">%%, иначе выполнение идет дальше до того места, где директива ng-switch-when будет содержать нужное значение.\\

Фактически здесь в элементы с директивой ng-switch-when вставляются те же файлы phonesList.html и tabletsList.html, которые использовались в прошлой теме.

Если же ни одна директива ng-switch-when не содержит правильного значения, то срабатывает блок с директивой **ng-switch-default**:

<code html>
<div ng-switch-default>
    Выберите товары для просмотра
</div>
</code>

В нашем случае изначально не выбрана ни одна радиокнопка, поэтому объект data.mode не будет иметь при старте никакого значения. А это значит, что как раз сработает блок с директивой //ng-switch-default// \\
\\
Таким образом, действие директивы ng-switch во многом похоже на действие ng-include, только ng-switch для вставки небольших кусков html-кода, в то время как ng-include применяется для вставки больших и более сложных участков разметки html.
Инструменты пользователя

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

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