AngularJsのui-selectを使って、複数選択可能な画像入りのセレクトボックスの実装方法を紹介します

参照：https://github.com/angular-ui/ui-select

html


<body ng-controller="DemoCtrl">

<ui-select multiple ng-model="demo.selectedColor" theme="bootstrap" close-on-select="false" reset-search-input="true">

<ui-select-match placeholder="選択してください">

<img ng-src='{{$item.img}}'>{{$item.name}}

</ui-select-match>

<ui-select-choices repeat="color in colors | filter: {name: $select.search}">

<img ng-src='{{color.img}}'>{{color.name}}

</ui-select-choices>

</ui-select>

</body>


angular.module('app') .controller('DemoCtrl', function ($scope) {


$scope.color = {};

$scope.colors = [

{ name: 'red',      img: 'img/red.jpg' },

{ name: 'blue',    img: 'img/blue.jpg' },

{ name: 'yellow', img: 'img/yellow.jpg' }

];


$scope.demo = {};

$scope.demo.selectedColor = [$scope.colors[0]];

});

■ multiple
ui-selectを複数選択可能のセレクトボックスにする(指定なしの場合は単一選択)

■ close-on-select

false : 項目選択しても選択リスト一覧を閉じない

true : 項目を選択すると選択リストが閉じる

■ reset-search-input

false : 項目選択後もフィルターの条件を維持する

true : 項目選択後はフィルターの条件をリセットする