Горизонтальный выпадающий выбор с изображениями

Question

Горизонтальный выпадающий выбор с изображениями

0

У меня есть классический выпадающий список, привязанный к данным с угловым.

<select class="form-control" ng-model="category">
   <option value="work">Work</option>
   <option value="home">Home</option>
   <option value="practical">Practical</option>
   <option value="no">No category</option>
</select>

Я хотел бы, чтобы эти параметры выпадающего изображения были горизонтальными, а не вертикальным текстом. Не это:

ВЫБРАТЬ КНОПКУ

Работа
Главная
практическое

Но это:

ВЫБРАТЬ КНОПКУ

изображение работы - изображение дома - практическое изображение

Я играл с дисплеем: встроенные блоки, поплавки (yikes) и даже думал о переключателях, рассматривая этот вопрос SO. Я пытаюсь выучить Угловое, так что без JQuery. спасибо

RobSeg 27 июль 2015, в 15:24

Источник

0

У вас есть только 4 варианта? Или этот список данных управляется? Ура!
potatopeelings 27 июль 2015, в 13:05
0

У меня только 4, статика, варианты. Это просто пример веб-приложения для изучения. Спасибо за вопрос.
RobSeg 27 июль 2015, в 13:09

Теги:

javascript

html

angularjs

css

1 ответ

Ещё вопросы

У вас есть только 4 варианта? Или этот список данных управляется? Ура!
У меня только 4, статика, варианты. Это просто пример веб-приложения для изучения. Спасибо за вопрос.

potatopeelings · Accepted Answer · 2015-07-27T12-15-00.000Z

Существуют ограничения на то, как вы можете выбирать стиль. Вам придется либо выбрать один из многочисленных стилизованных плагинов, либо перевернуть

<div ng-app="app">
    <div ng-controller="ctrlr">
        <span ng-repeat="entry in categories">
            <img ng-click="setCategory(entry)" ng-src="{{entry.src}}">
        </span>
        <div>Selected = {{category}}</div>
    </div>
</div>

<script>
    angular.module('app', []);
    angular.module('app').controller('ctrlr', function ($scope) {
        $scope.categories = [
            {
                code: 'work',
                src: 'Work.png'
            },
            {
                code: 'home',
                src: 'Home.png'
            },
            {
                code: 'practical',
                src: 'Practical.png'
            },
            {
                code: 'no',
                src: 'No category.png'
            }
        ];

        $scope.setCategory = function (entry) {
            $scope.category = entry.code;
        }
    });
</script>