javascript - 带有图像的水平下拉选择

Question

我有一个经典的选择下拉菜单，数据绑定(bind) Angular 。

<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>

我希望这些下拉选项是水平图像，而不是垂直文本。不是这个:

选择按钮

• 工作
• 家
• 实用

但是这个:

选择按钮

工作形象-居家形象-实用形象

我一直在玩 display: inline-blocks, floats (yikes) 甚至考虑考虑 this 的单选按钮所以问题。我正在尝试学习 Angular，所以请不要使用 JQuery。谢谢

Answer 1

选择样式的方式有一些限制。您要么必须从众多样式化的选择插件中选择一个，要么像这样滚动您自己的插件

<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>