Тестовой задание для верстальщика

by russianpenguin

HTML

<div>
    <p>В чем суть квеста?</p>
    <p>Все просто: у нас есть некоторое приложение на angularjs.</p>
    <p>Это приложение состоит из одного контроллера, который экспортирует некоторое api в пространство шаблона.</p>
    <p>Это две функции:
        <ol>
            <li>select(value) - функция выставляет активным то значение, которое было выбрано пользователем, т.е. value, которое передается как параметр;</li>
            <li>toggle() - инвертирует значение внутренней перепенной opened (Эта переменная доступна внутри шаблона и позволяет реализовать какое-то поведение, которое базируется на ее значении.</li>
        </ol>
    </p>
    <p>А так же список значений values. (Его мы используем как источник данных)</p>
    <h5>Ну а теперь задача</h5>
    <p>Нужно не меняя код js, а лишь манипулируя шаблоном и css сделать выпадающий список. Пример списка можно найти на заглавной странице <a target="_blank" href="http://future.tourindex.ru">http://future.tourindex.ru</a>. Не стоит гнаться за полноценным соответсвием. Внешний вид может быть любым.</p>
</div>
<h5>Сам код задания</h5>
<div ng-app="app" ng-controller="ctrl" ng-class="{'opened': opened}" class="outer">
    <span ng-click="toggle()" class="link">{{selected || "Значение не выбрано"}} &lt;-- Нажми меня</span>
    <div>
        <ul>
            <li ng-repeat="value in values" class="link" ng-click="select(value)">{{value}} &lt-- и меня :)</li>
        </ul>
    </div>
</div>

CSS

.outer div {
    display: none;
}

.outer.opened div {
    display: block;
}

.link {
    cursor: pointer
}

JavaScript

angular.module('app', [])
.controller('ctrl', function($scope) {
    $scope.selected = ''
    $scope.opened = false
    
    $scope.select = function(value) {
        $scope.selected = value
        $scope.toggle()
    }
    
    $scope.toggle = function() {
        $scope.opened = ! $scope.opened
    }
    
    $scope.values = ['value 1', 'value 2', 'value 3']
})