Demo > Callbacks

The directive provides 8 (eight) callbacks. Open your browser's console to see the output.


 

Define your directive:

<div
    isteven-multi-select 
    input-model="modernBrowsers"
    output-model="outputBrowsers"
    button-label="icon name"         
    item-label="icon name maker" 
    tick-property="ticked"     
    ...
    on-open="fOpen()"                
    on-close="fClose()"
    on-item-click="fClick( data )"
    on-select-all="fSelectAll()"
    on-select-none="fSelectNone()"
    on-reset="fReset()"
    on-clear="fClear()"
    on-search-change="fSearchChange( data )"
>
</div>

Define your input-model:

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

Define your callback functions:

$scope.fOpen = function() {
    console.log( 'On-open' );
}

$scope.fClose = function() {
    console.log( 'On-close' );
}    

$scope.fClick = function( data ) {           
    console.log( 'On-item-click' );        
    console.log( 'On-item-click - data:' );        
    console.log( data );
}    

$scope.fSelectAll = function() {
    console.log( 'On-select-all' );
}

$scope.fSelectNone = function() {
    console.log( 'On-select-none' );
}

$scope.fReset = function() {
    console.log( 'On-reset' );
}        

$scope.fClear = function() {
    console.log( 'On-clear' );
}

$scope.fSearchChange = function( data ) {
    console.log( 'On-search-change' );
    console.log( 'On-search-change - keyword: ' + data.keyword );
    console.log( 'On-search-change - result: ' );
    console.log( data.result );
}
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.outputBrowsers = [
  { icon: "{{removeHost(row.icon)}}", name: "{{row.name}}", maker: "{{row.maker}}, ticked: {{row.ticked}} },
];
Learn more

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