Question

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

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

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

SELECT BUTTON

工作
家
实际

但是这个：

SELECT BUTTON

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

我一直在玩显示：内联块，花车（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>

水平下拉选择图像

1 个答案: