水平下拉菜单选择图片

debugcn 发表于 Dev

罗伯·塞格

我有一个经典的选择下拉菜单，数据绑定角度。

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

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

选择按钮

工作
家
实际的

但是这个：

选择按钮

工作图片-家庭图片-实用图片

我一直在玩显示器：内联代码块，浮点（喜欢），甚至考虑此SO问题考虑单选按钮。我正在尝试学习Angular，所以请不要使用JQuery。谢谢

土豆皮

在样式选择方面存在一些限制。您要么必须从众多的样式选择插件之一中进行选择，要么就这样自己滚动

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。