diff --git a/isteven-multi-select.css b/isteven-multi-select.css index ab2183c..98897d1 100644 --- a/isteven-multi-select.css +++ b/isteven-multi-select.css @@ -297,3 +297,51 @@ max-height: 22px; max-width:22px; } + + +/*label*/ +.multiSelect .multi_tree, +.multiSelect .multi_tree * { + padding: 0; + margin: 0; + list-style: none; +} + +.multiSelect .multi_tree label.retract_button{ + padding-right:0; +} + +.multiSelect .multi_tree label.retract_button::before{ + content: "\25b6"; + font-size: 16px; + width:16px; + padding-left: 8px; + padding-right: 8px; + color:#333; +} + +.multiSelect .multi_tree * { + vertical-align: middle; +} + +.multiSelect .multi_tree input[type="checkbox"] { + display: none; +} + +.multiSelect .multi_tree label { + cursor: pointer; +} + +.multiSelect .multi_tree label.retract_button::before { + -webkit-transform: translatex(-24px); + -moz-transform: translatex(-24px); + -ms-transform: translatex(-24px); + -o-transform: translatex(-24px); + transform: translatex(-24px); +} + +.multiSelect .multi_tree label.retract_hidden_button::before{ + content: "\25bc"; + font-size: 12px; +} + diff --git a/isteven-multi-select.js b/isteven-multi-select.js index b5d3465..b65767b 100644 --- a/isteven-multi-select.js +++ b/isteven-multi-select.js @@ -38,49 +38,54 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' restrict: 'AE', - scope: - { - // models - inputModel : '=', - outputModel : '=', - - // settings based on attribute - isDisabled : '=', - - // callbacks - onClear : '&', - onClose : '&', - onSearchChange : '&', - onItemClick : '&', - onOpen : '&', - onReset : '&', - onSelectAll : '&', - onSelectNone : '&', - - // i18n - translation : '=' - }, - - /* + scope: + { + // models + inputModel : '=', + outputModel : '=', + + // settings based on attribute + isDisabled : '=', + isSubmit : '=', + isRetract : '=', + + // callbacks + onClear : '&', + onClose : '&', + onSubmit : '&', + onSearchChange : '&', + onItemClick : '&', + onOpen : '&', + onReset : '&', + onSelectAll : '&', + onSelectNone : '&', + + // i18n + translation : '=', + defaultLabel : '=' + }, + + /* * The rest are attributes. They don't need to be parsed / binded, so we can safely access them by value. * - buttonLabel, directiveId, helperElements, itemLabel, maxLabels, orientation, selectionMode, minSearchLength, * tickProperty, disableProperty, groupProperty, searchProperty, maxHeight, outputProperties */ - - templateUrl: - 'isteven-multi-select.htm', - link: function ( $scope, element, attrs ) { + templateUrl: + 'isteven-multi-select.htm', + + link: function ( $scope, element, attrs ) { $scope.backUp = []; - $scope.varButtonLabel = ''; + $scope.backInputModel = []; + $scope.varButtonLabel = ''; $scope.spacingProperty = ''; - $scope.indexProperty = ''; + $scope.indexProperty = ''; $scope.orientationH = false; $scope.orientationV = true; $scope.filteredModel = []; - $scope.inputLabel = { labelFilter: '' }; - $scope.tabIndex = 0; + $scope.inputLabel = { labelFilter: '' }; + $scope.tabIndex = 0; $scope.lang = {}; $scope.helperStatus = { all : true, @@ -89,7 +94,7 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' filter : true }; - var + var prevTabIndex = 0, helperItems = [], helperItemsLength = 0, @@ -98,38 +103,38 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' selectedItems = [], formElements = [], vMinSearchLength = 0, - clickedItem = null + clickedItem = null // v3.0.0 // clear button clicked - $scope.clearClicked = function( e ) { + $scope.clearClicked = function( e ) { $scope.inputLabel.labelFilter = ''; $scope.updateFilter(); - $scope.select( 'clear', e ); + $scope.select( 'clear', e ); } // A little hack so that AngularJS ng-repeat can loop using start and end index like a normal loop // http://stackoverflow.com/questions/16824853/way-to-ng-repeat-defined-number-of-times-instead-of-repeating-over-array $scope.numberToArray = function( num ) { - return new Array( num ); + return new Array( num ); } // Call this function when user type on the filter field - $scope.searchChanged = function() { + $scope.searchChanged = function() { if ( $scope.inputLabel.labelFilter.length < vMinSearchLength && $scope.inputLabel.labelFilter.length > 0 ) { return false; - } + } $scope.updateFilter(); } $scope.updateFilter = function() - { + { // we check by looping from end of input-model $scope.filteredModel = []; var i = 0; if ( typeof $scope.inputModel === 'undefined' ) { - return false; + return false; } for( i = $scope.inputModel.length - 1; i >= 0; i-- ) { @@ -138,39 +143,39 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' if ( typeof $scope.inputModel[ i ][ attrs.groupProperty ] !== 'undefined' && $scope.inputModel[ i ][ attrs.groupProperty ] === false ) { $scope.filteredModel.push( $scope.inputModel[ i ] ); } - - // if it's data + + // if it's data var gotData = false; - if ( typeof $scope.inputModel[ i ][ attrs.groupProperty ] === 'undefined' ) { - - // If we set the search-key attribute, we use this loop. + if ( typeof $scope.inputModel[ i ][ attrs.groupProperty ] === 'undefined' ) { + + // If we set the search-key attribute, we use this loop. if ( typeof attrs.searchProperty !== 'undefined' && attrs.searchProperty !== '' ) { for (var key in $scope.inputModel[ i ] ) { - if ( + if ( typeof $scope.inputModel[ i ][ key ] !== 'boolean' - && String( $scope.inputModel[ i ][ key ] ).toUpperCase().indexOf( $scope.inputLabel.labelFilter.toUpperCase() ) >= 0 + && String( $scope.inputModel[ i ][ key ] ).toUpperCase().indexOf( $scope.inputLabel.labelFilter.toUpperCase() ) >= 0 && attrs.searchProperty.indexOf( key ) > -1 ) { gotData = true; break; } - } + } } // if there's no search-key attribute, we use this one. Much better on performance. else { for ( var key in $scope.inputModel[ i ] ) { - if ( + if ( typeof $scope.inputModel[ i ][ key ] !== 'boolean' - && String( $scope.inputModel[ i ][ key ] ).toUpperCase().indexOf( $scope.inputLabel.labelFilter.toUpperCase() ) >= 0 + && String( $scope.inputModel[ i ][ key ] ).toUpperCase().indexOf( $scope.inputLabel.labelFilter.toUpperCase() ) >= 0 ) { gotData = true; break; } - } + } } - if ( gotData === true ) { + if ( gotData === true ) { // push $scope.filteredModel.push( $scope.inputModel[ i ] ); } @@ -179,79 +184,79 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' // if it's group start if ( typeof $scope.inputModel[ i ][ attrs.groupProperty ] !== 'undefined' && $scope.inputModel[ i ][ attrs.groupProperty ] === true ) { - if ( typeof $scope.filteredModel[ $scope.filteredModel.length - 1 ][ attrs.groupProperty ] !== 'undefined' - && $scope.filteredModel[ $scope.filteredModel.length - 1 ][ attrs.groupProperty ] === false ) { + if ( typeof $scope.filteredModel[ $scope.filteredModel.length - 1 ][ attrs.groupProperty ] !== 'undefined' + && $scope.filteredModel[ $scope.filteredModel.length - 1 ][ attrs.groupProperty ] === false ) { $scope.filteredModel.pop(); } else { $scope.filteredModel.push( $scope.inputModel[ i ] ); } } - } + } - $scope.filteredModel.reverse(); - - $timeout( function() { + $scope.filteredModel.reverse(); - $scope.getFormElements(); - - // Callback: on filter change + $timeout( function() { + + $scope.getFormElements(); + + // Callback: on filter change if ( $scope.inputLabel.labelFilter.length > vMinSearchLength ) { var filterObj = []; angular.forEach( $scope.filteredModel, function( value, key ) { - if ( typeof value !== 'undefined' ) { - if ( typeof value[ attrs.groupProperty ] === 'undefined' ) { + if ( typeof value !== 'undefined' ) { + if ( typeof value[ attrs.groupProperty ] === 'undefined' ) { var tempObj = angular.copy( value ); - var index = filterObj.push( tempObj ); + var index = filterObj.push( tempObj ); delete filterObj[ index - 1 ][ $scope.indexProperty ]; - delete filterObj[ index - 1 ][ $scope.spacingProperty ]; + delete filterObj[ index - 1 ][ $scope.spacingProperty ]; } } }); - $scope.onSearchChange({ - data: - { - keyword: $scope.inputLabel.labelFilter, - result: filterObj - } + $scope.onSearchChange({ + data: + { + keyword: $scope.inputLabel.labelFilter, + result: filterObj + } }); } },0); }; // List all the input elements. We need this for our keyboard navigation. - // This function will be called everytime the filter is updated. + // This function will be called everytime the filter is updated. // Depending on the size of filtered mode, might not good for performance, but oh well.. - $scope.getFormElements = function() { + $scope.getFormElements = function() { formElements = []; - var + var selectButtons = [], inputField = [], checkboxes = [], clearButton = []; - + // If available, then get select all, select none, and reset buttons - if ( $scope.helperStatus.all || $scope.helperStatus.none || $scope.helperStatus.reset ) { - selectButtons = element.children().children().next().children().children()[ 0 ].getElementsByTagName( 'button' ); + if ( $scope.helperStatus.all || $scope.helperStatus.none || $scope.helperStatus.reset ) { + selectButtons = element.children().children().next().children().children()[ 0 ].getElementsByTagName( 'button' ); // If available, then get the search box and the clear button - if ( $scope.helperStatus.filter ) { - // Get helper - search and clear button. - inputField = element.children().children().next().children().children().next()[ 0 ].getElementsByTagName( 'input' ); - clearButton = element.children().children().next().children().children().next()[ 0 ].getElementsByTagName( 'button' ); + if ( $scope.helperStatus.filter ) { + // Get helper - search and clear button. + inputField = element.children().children().next().children().children().next()[ 0 ].getElementsByTagName( 'input' ); + clearButton = element.children().children().next().children().children().next()[ 0 ].getElementsByTagName( 'button' ); } } else { - if ( $scope.helperStatus.filter ) { - // Get helper - search and clear button. - inputField = element.children().children().next().children().children()[ 0 ].getElementsByTagName( 'input' ); + if ( $scope.helperStatus.filter ) { + // Get helper - search and clear button. + inputField = element.children().children().next().children().children()[ 0 ].getElementsByTagName( 'input' ); clearButton = element.children().children().next().children().children()[ 0 ].getElementsByTagName( 'button' ); } } - + // Get checkboxes if ( !$scope.helperStatus.all && !$scope.helperStatus.none && !$scope.helperStatus.reset && !$scope.helperStatus.filter ) { checkboxes = element.children().children().next()[ 0 ].getElementsByTagName( 'input' ); @@ -260,58 +265,58 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' checkboxes = element.children().children().next().children().next()[ 0 ].getElementsByTagName( 'input' ); } - // Push them into global array formElements[] + // Push them into global array formElements[] for ( var i = 0; i < selectButtons.length ; i++ ) { formElements.push( selectButtons[ i ] ); } for ( var i = 0; i < inputField.length ; i++ ) { formElements.push( inputField[ i ] ); } for ( var i = 0; i < clearButton.length ; i++ ) { formElements.push( clearButton[ i ] ); } - for ( var i = 0; i < checkboxes.length ; i++ ) { formElements.push( checkboxes[ i ] ); } - } + for ( var i = 0; i < checkboxes.length ; i++ ) { formElements.push( checkboxes[ i ] ); } + } // check if an item has attrs.groupProperty (be it true or false) $scope.isGroupMarker = function( item , type ) { - if ( typeof item[ attrs.groupProperty ] !== 'undefined' && item[ attrs.groupProperty ] === type ) return true; + if ( typeof item[ attrs.groupProperty ] !== 'undefined' && item[ attrs.groupProperty ] === type ) return true; return false; } $scope.removeGroupEndMarker = function( item ) { - if ( typeof item[ attrs.groupProperty ] !== 'undefined' && item[ attrs.groupProperty ] === false ) return false; + if ( typeof item[ attrs.groupProperty ] !== 'undefined' && item[ attrs.groupProperty ] === false ) return false; return true; - } + } // call this function when an item is clicked - $scope.syncItems = function( item, e, ng_repeat_index ) { + $scope.syncItems = function( item, e, ng_repeat_index ) { e.preventDefault(); e.stopPropagation(); // if the directive is globaly disabled, do nothing - if ( typeof attrs.disableProperty !== 'undefined' && item[ attrs.disableProperty ] === true ) { + if ( typeof attrs.disableProperty !== 'undefined' && item[ attrs.disableProperty ] === true ) { return false; } // if item is disabled, do nothing - if ( typeof attrs.isDisabled !== 'undefined' && $scope.isDisabled === true ) { + if ( typeof attrs.isDisabled !== 'undefined' && $scope.isDisabled === true ) { return false; - } + } // if end group marker is clicked, do nothing if ( typeof item[ attrs.groupProperty ] !== 'undefined' && item[ attrs.groupProperty ] === false ) { return false; - } + } - var index = $scope.filteredModel.indexOf( item ); + var index = $scope.filteredModel.indexOf( item ); // if the start of group marker is clicked ( only for multiple selection! ) // how it works: // - if, in a group, there are items which are not selected, then they all will be selected - // - if, in a group, all items are selected, then they all will be de-selected - if ( typeof item[ attrs.groupProperty ] !== 'undefined' && item[ attrs.groupProperty ] === true ) { + // - if, in a group, all items are selected, then they all will be de-selected + if ( typeof item[ attrs.groupProperty ] !== 'undefined' && item[ attrs.groupProperty ] === true ) { // this is only for multiple selection, so if selection mode is single, do nothing if ( typeof attrs.selectionMode !== 'undefined' && attrs.selectionMode.toUpperCase() === 'SINGLE' ) { return false; } - + var i,j,k; var startIndex = 0; var endIndex = $scope.filteredModel.length - 1; @@ -320,44 +325,44 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' // nest level is to mark the depth of the group. // when you get into a group (start group marker), nestLevel++ // when you exit a group (end group marker), nextLevel-- - var nestLevel = 0; + var nestLevel = 0; // we loop throughout the filtered model (not whole model) - for( i = index ; i < $scope.filteredModel.length ; i++) { + for( i = index ; i < $scope.filteredModel.length ; i++) { // this break will be executed when we're done processing each group - if ( nestLevel === 0 && i > index ) + if ( nestLevel === 0 && i > index ) { break; } - + if ( typeof $scope.filteredModel[ i ][ attrs.groupProperty ] !== 'undefined' && $scope.filteredModel[ i ][ attrs.groupProperty ] === true ) { - + // To cater multi level grouping if ( tempArr.length === 0 ) { - startIndex = i + 1; - } + startIndex = i + 1; + } nestLevel = nestLevel + 1; - } + } // if group end else if ( typeof $scope.filteredModel[ i ][ attrs.groupProperty ] !== 'undefined' && $scope.filteredModel[ i ][ attrs.groupProperty ] === false ) { - nestLevel = nestLevel - 1; + nestLevel = nestLevel - 1; - // cek if all are ticked or not - if ( tempArr.length > 0 && nestLevel === 0 ) { + // cek if all are ticked or not + if ( tempArr.length > 0 && nestLevel === 0 ) { - var allTicked = true; + var allTicked = true; endIndex = i; - for ( j = 0; j < tempArr.length ; j++ ) { + for ( j = 0; j < tempArr.length ; j++ ) { if ( typeof tempArr[ j ][ $scope.tickProperty ] !== 'undefined' && tempArr[ j ][ $scope.tickProperty ] === false ) { allTicked = false; break; } - } + } if ( allTicked === true ) { for ( j = startIndex; j <= endIndex ; j++ ) { @@ -375,19 +380,19 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' $scope.inputModel[ inputModelIndex ][ $scope.tickProperty ] = false; } } - } + } } else { for ( j = startIndex; j <= endIndex ; j++ ) { if ( typeof $scope.filteredModel[ j ][ attrs.groupProperty ] === 'undefined' ) { if ( typeof attrs.disableProperty === 'undefined' ) { - $scope.filteredModel[ j ][ $scope.tickProperty ] = true; + $scope.filteredModel[ j ][ $scope.tickProperty ] = true; // we refresh input model as well inputModelIndex = $scope.filteredModel[ j ][ $scope.indexProperty ]; $scope.inputModel[ inputModelIndex ][ $scope.tickProperty ] = true; - } + } else if ( $scope.filteredModel[ j ][ attrs.disableProperty ] !== true ) { $scope.filteredModel[ j ][ $scope.tickProperty ] = true; // we refresh input model as well @@ -395,16 +400,16 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' $scope.inputModel[ inputModelIndex ][ $scope.tickProperty ] = true; } } - } - } + } + } } } - + // if data - else { - tempArr.push( $scope.filteredModel[ i ] ); + else { + tempArr.push( $scope.filteredModel[ i ] ); } - } + } } // if an item (not group marker) is clicked @@ -412,18 +417,18 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' // If it's single selection mode if ( typeof attrs.selectionMode !== 'undefined' && attrs.selectionMode.toUpperCase() === 'SINGLE' ) { - + // first, set everything to false - for( i=0 ; i < $scope.filteredModel.length ; i++) { - $scope.filteredModel[ i ][ $scope.tickProperty ] = false; - } - for( i=0 ; i < $scope.inputModel.length ; i++) { - $scope.inputModel[ i ][ $scope.tickProperty ] = false; - } - + for( i=0 ; i < $scope.filteredModel.length ; i++) { + $scope.filteredModel[ i ][ $scope.tickProperty ] = false; + } + for( i=0 ; i < $scope.inputModel.length ; i++) { + $scope.inputModel[ i ][ $scope.tickProperty ] = false; + } + // then set the clicked item to true - $scope.filteredModel[ index ][ $scope.tickProperty ] = true; - } + $scope.filteredModel[ index ][ $scope.tickProperty ] = true; + } // Multiple else { @@ -431,29 +436,30 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' } // we refresh input model as well - var inputModelIndex = $scope.filteredModel[ index ][ $scope.indexProperty ]; - $scope.inputModel[ inputModelIndex ][ $scope.tickProperty ] = $scope.filteredModel[ index ][ $scope.tickProperty ]; - } + var inputModelIndex = $scope.filteredModel[ index ][ $scope.indexProperty ]; + $scope.inputModel[ inputModelIndex ][ $scope.tickProperty ] = $scope.filteredModel[ index ][ $scope.tickProperty ]; + } // we execute the callback function here - clickedItem = angular.copy( item ); - if ( clickedItem !== null ) { + clickedItem = angular.copy( item ); + if ( clickedItem !== null ) { $timeout( function() { delete clickedItem[ $scope.indexProperty ]; - delete clickedItem[ $scope.spacingProperty ]; + delete clickedItem[ $scope.spacingProperty ]; + delete clickedItem[ $scope.retractProperty]; $scope.onItemClick( { data: clickedItem } ); - clickedItem = null; - }, 0 ); - } - + clickedItem = null; + }, 0 ); + } + $scope.refreshOutputModel(); - $scope.refreshButton(); + $scope.refreshButton(); // We update the index here prevTabIndex = $scope.tabIndex; $scope.tabIndex = ng_repeat_index + helperItemsLength; - - // Set focus on the hidden checkbox + + // Set focus on the hidden checkbox e.target.focus(); // set & remove CSS style @@ -462,67 +468,212 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' if ( typeof attrs.selectionMode !== 'undefined' && attrs.selectionMode.toUpperCase() === 'SINGLE' ) { // on single selection mode, we then hide the checkbox layer - $scope.toggleCheckboxes( e ); + $scope.toggleCheckboxes( e ); + } + } + + // call this function when an item is clicked + $scope.hideSubItems = function( item, e, ng_repeat_index ) { + e.preventDefault(); + e.stopPropagation(); + + // if the directive is globaly disabled, do nothing + if ( typeof attrs.disableProperty !== 'undefined' && item[ attrs.disableProperty ] === true ) { + return false; + } + + // if item is disabled, do nothing + if ( typeof attrs.isDisabled !== 'undefined' && $scope.isDisabled === true ) { + return false; + } + + // if end group marker is clicked, do nothing + if ( typeof item[ attrs.groupProperty ] !== 'undefined' && item[ attrs.groupProperty ] === false ) { + return false; + } + + var index = $scope.filteredModel.indexOf( item ); + // if the start of group marker is clicked ( only for multiple selection! ) + // how it works: + // - if, in a group, there are items which are not selected, then they all will be selected + // - if, in a group, all items are selected, then they all will be de-selected + if ( typeof item[ attrs.groupProperty ] !== 'undefined' && item[ attrs.groupProperty ] === true ) { + + item[attrs.retractProperty] = !item[attrs.retractProperty]; + // this is only for multiple selection, so if selection mode is single, do nothing + if ( typeof attrs.selectionMode !== 'undefined' && attrs.selectionMode.toUpperCase() === 'SINGLE' ) { + return false; + } + + var i,j,k; + var startIndex = 0; + var endIndex = $scope.filteredModel.length - 1; + var tempArr = []; + + // nest level is to mark the depth of the group. + // when you get into a group (start group marker), nestLevel++ + // when you exit a group (end group marker), nextLevel-- + var nestLevel = 0; + // we loop throughout the filtered model (not whole model) + for( i = index ; i < $scope.filteredModel.length ; i++) { + + // this break will be executed when we're done processing each group + if ( nestLevel === 0 && i > index ) + { + break; + } + + if ( typeof $scope.filteredModel[ i ][ attrs.groupProperty ] !== 'undefined' && $scope.filteredModel[ i ][ attrs.groupProperty ] === true ) { + + // To cater multi level grouping + if ( tempArr.length === 0 ) { + startIndex = i + 1; + } + nestLevel = nestLevel + 1; + } + + // if group end + else if ( typeof $scope.filteredModel[ i ][ attrs.groupProperty ] !== 'undefined' && $scope.filteredModel[ i ][ attrs.groupProperty ] === false ) { + + nestLevel = nestLevel - 1; + + // cek if all are ticked or not + if ( tempArr.length > 0 && nestLevel === 0 ) { + endIndex = i; + for ( j = startIndex; j <= endIndex ; j++ ) { + $scope.filteredModel[ j ][ $scope.retractProperty ] = item[attrs.retractProperty]; + // var inputModelIndex = $scope.filteredModel[ j ][ $scope.indexProperty ]; + // $scope.inputModel[ inputModelIndex ][ $scope.retractProperty ] = !$scope.inputModel[ inputModelIndex ][ $scope.retractProperty ]; + } + } + } + // if data + else { + tempArr.push( $scope.filteredModel[ i ] ); + } + } + //--change all input model + nestLevel = 0; + startIndex = 0; + endIndex = $scope.inputModel.length - 1; + tempArr = []; + index = item[$scope.indexProperty]; + for( i = index ; i < $scope.inputModel.length ; i++) { + + // this break will be executed when we're done processing each group + if ( nestLevel === 0 && i > index ) + { + break; + } + + if ( typeof $scope.inputModel[ i ][ attrs.groupProperty ] !== 'undefined' && $scope.inputModel[ i ][ attrs.groupProperty ] === true ) { + + // To cater multi level grouping + if ( tempArr.length === 0 ) { + startIndex = i + 1; + } + nestLevel = nestLevel + 1; + } + + // if group end + else if ( typeof $scope.inputModel[ i ][ attrs.groupProperty ] !== 'undefined' && $scope.inputModel[ i ][ attrs.groupProperty ] === false ) { + + nestLevel = nestLevel - 1; + + // cek if all are ticked or not + if ( tempArr.length > 0 && nestLevel === 0 ) { + endIndex = i; + for ( j = startIndex; j <= endIndex ; j++ ) { + $scope.inputModel[ j ][ $scope.retractProperty ] = item[attrs.retractProperty]; + // var inputModelIndex = $scope.filteredModel[ j ][ $scope.indexProperty ]; + // $scope.inputModel[ inputModelIndex ][ $scope.retractProperty ] = !$scope.inputModel[ inputModelIndex ][ $scope.retractProperty ]; + } + } + } + // if data + else { + tempArr.push( $scope.inputModel[ i ] ); + } + } + } + } + + + + $scope.checkDisplayItem = function (item) { + if(!$scope.isRetract){ + return true; + } + if ( typeof attrs.selectionMode !== 'undefined' && attrs.selectionMode.toUpperCase() === 'SINGLE' ) { + return true; } - } + if (typeof attrs.retractProperty !== 'undefined' && typeof attrs.groupProperty !== 'undefined' && !item.hasOwnProperty(attrs.groupProperty)){ + return !!item[attrs.retractProperty] + } + return true; + }; // update $scope.outputModel - $scope.refreshOutputModel = function() { - + $scope.refreshOutputModel = function() { + $scope.outputModel = []; - var + var outputProps = [], tempObj = {}; // v4.0.0 - if ( typeof attrs.outputProperties !== 'undefined' ) { - outputProps = attrs.outputProperties.split(' '); - angular.forEach( $scope.inputModel, function( value, key ) { - if ( - typeof value !== 'undefined' - && typeof value[ attrs.groupProperty ] === 'undefined' - && value[ $scope.tickProperty ] === true + if ( typeof attrs.outputProperties !== 'undefined' ) { + outputProps = attrs.outputProperties.split(' '); + angular.forEach( $scope.inputModel, function( value, key ) { + if ( + typeof value !== 'undefined' + && typeof value[ attrs.groupProperty ] === 'undefined' + && value[ $scope.tickProperty ] === true ) { tempObj = {}; - angular.forEach( value, function( value1, key1 ) { - if ( outputProps.indexOf( key1 ) > -1 ) { - tempObj[ key1 ] = value1; + angular.forEach( value, function( value1, key1 ) { + if ( outputProps.indexOf( key1 ) > -1 ) { + tempObj[ key1 ] = value1; } }); - var index = $scope.outputModel.push( tempObj ); + var index = $scope.outputModel.push( tempObj ); delete $scope.outputModel[ index - 1 ][ $scope.indexProperty ]; - delete $scope.outputModel[ index - 1 ][ $scope.spacingProperty ]; + delete $scope.outputModel[ index - 1 ][ $scope.spacingProperty ]; + delete $scope.outputModel[ index - 1 ][ $scope.retractProperty ]; } - }); + }); } else { - angular.forEach( $scope.inputModel, function( value, key ) { - if ( - typeof value !== 'undefined' - && typeof value[ attrs.groupProperty ] === 'undefined' - && value[ $scope.tickProperty ] === true + angular.forEach( $scope.inputModel, function( value, key ) { + if ( + typeof value !== 'undefined' + && typeof value[ attrs.groupProperty ] === 'undefined' + && value[ $scope.tickProperty ] === true ) { var temp = angular.copy( value ); - var index = $scope.outputModel.push( temp ); + var index = $scope.outputModel.push( temp ); delete $scope.outputModel[ index - 1 ][ $scope.indexProperty ]; - delete $scope.outputModel[ index - 1 ][ $scope.spacingProperty ]; + delete $scope.outputModel[ index - 1 ][ $scope.spacingProperty ]; + delete $scope.outputModel[ index - 1 ][ $scope.retractProperty ]; } - }); + }); } } // refresh button label $scope.refreshButton = function() { - $scope.varButtonLabel = ''; - var ctr = 0; + $scope.varButtonLabel = ''; + var ctr = 0; // refresh button label... - if ( $scope.outputModel.length === 0 ) { - // https://github.com/isteven/angular-multi-select/pull/19 + if(typeof $scope.defaultLabel != 'undefined'){ + $scope.varButtonLabel = $scope.defaultLabel; + }else if ( $scope.outputModel.length === 0 ) { + // https://github.com/isteven/angular-multi-select/pull/19 $scope.varButtonLabel = $scope.lang.nothingSelected; } - else { + else { var tempMaxLabels = $scope.outputModel.length; if ( typeof attrs.maxLabels !== 'undefined' && attrs.maxLabels !== '' ) { tempMaxLabels = attrs.maxLabels; @@ -534,86 +685,82 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' } else { $scope.more = false; - } - + } + angular.forEach( $scope.inputModel, function( value, key ) { - if ( typeof value !== 'undefined' && value[ attrs.tickProperty ] === true ) { - if ( ctr < tempMaxLabels ) { + if ( typeof value !== 'undefined' && value[ attrs.tickProperty ] === true ) { + if ( ctr < tempMaxLabels ) { $scope.varButtonLabel += ( $scope.varButtonLabel.length > 0 ? ',