SuggestBox Example: MultiSelect

Example without searchBox. Used for small amount of list items. Selected items will be displayed as comma separated text. Such layout can be used as a filter component for table (grid).

by Askarbek Zadauly

HTML

<script src="https://ascarbek.github.io/suggestbox/vendor/angular-suggestbox/dist/suggest.box.min.js"></script>
<link rel="stylesheet" href="https://ascarbek.github.io/suggestbox/vendor/angular-suggestbox/dist/suggest.box.min.css">
<link rel="stylesheet" href="https://ascarbek.github.io/suggestbox/vendor/font-awesome/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Open+Sans:400,600&amp;subset=latin,cyrillic-ext"></script>
<div class="example" ng-app="demo" ng-controller="demo as vm">
    <div class="label">Select status:</div>
    <div
         az-suggest-box
         sb-list="vm.statuses"
         sb-selected-list-item-class="sb-list-item-checked"
         class="suggest-box">
        <div class="select" sb-trigger-area>
            <div class="input">
                <div sb-selection-item>{{s.name}}<span ng-if="!$last">,&nbsp;</span></div>
            </div>

            <button><i class="fa fa-chevron-down"></i></button>
        </div>

        <ul class="dropdown">
            <li sb-dropdown-item class="item">{{i.name}}</li>
        </ul>
    </div>
</div>

CSS

body
{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

*, *:before, *:after
{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

.example
{
    margin: 20px 10px;
}

.example .label
{
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}

JavaScript

(function(){
    'use strict';

    var app = angular.module('demo', ['azSuggestBox']);
	app.controller('demo', ['$scope', function($scope){
        	var vm = this;
            
             vm.statuses = [
                { name: 'created' },
                { name: 'postponed' },
                { name: 'assigned' },
                { name: 'completed' },
                { name: 'closed' }
            ];
        }]);
})();