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









    
        
            
            {{button.label}}
        
    
    
        
            
                
                {{tablet.name}}
                Цена: {{tablet.price}} $
                Производитель: {{tablet.company}}
                
            
        
        
            
                
                {{phone.name}}
                Цена: {{phone.price}} $
                Производитель: {{phone.company}}
                
            
        
        
            Выберите товары для просмотра

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

И если data.mode="Tablets", то срабатывает код в блоке %%

%%, иначе выполнение идет дальше до того места, где директива ng-switch-when будет содержать нужное значение.\\ Фактически здесь в элементы с директивой ng-switch-when вставляются те же файлы phonesList.html и tabletsList.html, которые использовались в прошлой теме. Если же ни одна директива ng-switch-when не содержит правильного значения, то срабатывает блок с директивой **ng-switch-default**:



    Выберите товары для просмотра

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