Demo > Grouping

Vertical grouping

Horizontal grouping (just add orientation="horizontal").

Grouping is just additional rows in your input-model

First, in your directive declaration, set a grouping marker using the group-property, let's say group-property="msGroup". This is our group marker. Now, in your controller, grouping is made by enclosing some rows of your input-model array with this msGroup attribute.

msGroup: true will start a group, and
msGroup: false will end a group

Example:

$scope.data = [
    {   name: 'People', msGroup: true       },  // Start a group labled 'People'
    {   name: 'Person A', selected: false   },      // Person A. 
    {   name: 'Person B', selected: false   },      // Person B
    {   msGroup: false }                        // Close 'People' group
];

The directive will take care of indentation of grouped items. It supports nested grouping, as deep as your layout permits. You can use HTML tags on groups as usual. Clicking the group header will select/deselect all visible items under that particular group EXCEPT on single selection-mode.

Below are the codes to create the vertical multi-select above:

View
Controller

Define your directive:

<div
    isteven-multi-select
    input-model="webBrowsersGrouped"
    output-model="outputBrowsers"
    button-label="icon name"
    item-label="icon name maker"
    tick-property="ticked"
    ...
    group-property="msGroup"
>
</div>

Define your input-model:

$scope.webBrowsersGrouped = [
    {
        name: '<strong>All Browsers</strong>',
        msGroup: true
    },
    {
        name: '<strong>Modern Web Browsers</strong>',
        msGroup: true
    },
    { 
        icon: '<img  src="https://cdn1.iconfinder.com/data/icons/fatcow/32/opera.png" />',                         
        name: 'Opera',              
        maker: '(Opera Software)',        
        ticked: true
    },
    { 
        icon: '<img  src="https://cdn1.iconfinder.com/data/icons/fatcow/32/internet_explorer.png" />',             
        name: 'Internet Explorer',  
        maker: '(Microsoft)',
        ticked: false   
    },
    { 
        icon: '<img  src="https://cdn1.iconfinder.com/data/icons/humano2/32x32/apps/firefox-icon.png" />',         
        name: 'Firefox',            
        maker: '(Mozilla Foundation)',    
        ticked: true    
    },
    { 
        icon: '<img  src="https://cdn1.iconfinder.com/data/icons/fatcow/32x32/safari_browser.png" />',             
        name: 'Safari',             
        maker: '(Apple)',                 
        ticked: false   
    },
    { 
        icon: '<img  src="https://cdn1.iconfinder.com/data/icons/google_jfk_icons_by_carlosjj/32/chrome.png" />',  
        name: 'Chrome',             
        maker: '(Google)',                
        ticked: true   
    },
    {
        msGroup: false
    },
    {
        name: '<strong>Classic Web Browsers</strong>',
        msGroup: true
    },
    { 
        icon: '<img  src="http://www.ucdmc.ucdavis.edu/apps/error/nojavascript/images/netscape_icon.jpg" />',      
        name: 'Netscape Navigator', 
        maker: '(Netscape Corporation)',  
        ticked: true    
    },
    { 
        icon: '<img  src="http://upload.wikimedia.org/wikipedia/en/thumb/f/f4/Amaya_logo_65x50.png/48px-Amaya_logo_65x50.png" />',             
        name: 'Amaya',  
        maker: '(Inria & W3C)',             
        ticked: true   
    },
    {
        icon: '<img  src="http://upload.wikimedia.org/wikipedia/commons/8/8c/WorldWideWeb_Icon.png" />',
        name: 'WorldWideWeb Nexus',
        maker: '(Tim Berners-Lee)',
        ticked: false
    },
    {
        msGroup: false
    },
    {
        msGroup: false
    }
];

Output model

Look at the output-model below to see the values getting updated as you select / deselect an item in the directive. Icons in the objects are actually full HTML img tag, shortened for simplicity.

            $scope.outputBrowsers1 = [
            
                    {
                    icon: "{{removeHost(row.icon)}}",
                    name: "{{row.name}}",
                    maker: "{{row.maker}}",
                    ticked: {{row.ticked}}
                    },
                
            ];

Things to remember

Important Your input-model is still a flat, one-dimensional array of objects.

Important Don't put tick-property in your group marker.

Important Group markers won't be included in the output-model.

Note You search the item label, not the group label.

Learn more

Open the /docs/js/controllers/demo-grouping.js, as well as this view docs/views/demo-grouping.htmto learn the code directly.