diff options
Diffstat (limited to 'angular-multi-select.js')
| -rw-r--r-- | angular-multi-select.js | 96 |
1 files changed, 16 insertions, 80 deletions
diff --git a/angular-multi-select.js b/angular-multi-select.js index 317cccc..bb50b78 100644 --- a/angular-multi-select.js +++ b/angular-multi-select.js @@ -5,21 +5,21 @@ * * Angular JS Multi Select * Creates a dropdown-like button with checkboxes. - * Accepts an array of objects & modifies the checkbox status. * * -------------------------------------------------------------------------------- * MIT License * - * Copyright (C) 2014 Ignatius Steven (ignatius.steven@gmail.com) + * Copyright (C) 2014 Ignatius Steven * * Permission is hereby granted, free of charge, to any person obtaining a copy of * this software and associated documentation files (the "Software"), to deal in * the Software without restriction, including without limitation the rights to * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of * the Software, and to permit persons to whom the Software is furnished to do so, - * subject to the following conditions: The above copyright notice and this - * permission notice shall be included in all copies or substantial portions of - * the Software. + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, @@ -29,71 +29,6 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * -------------------------------------------------------------------------------- - * - * Usage: - * - * <div - * multi-select - * input-model="input_list" - * item-label="firstName lastName" - * item-ticker="selected" - * output-model="output_list" - * orientation="vertical" - * max-labels="4" - * max-height="500" - * is-disabled="multi-select-state" > - * </div> - * - * or - * - * <multi-select - * ... - * ... - * </multi-select> - * (*** be careful with browser compatibility) - * - * Attributes: - * - * input-model (! REQUIRED !): - * $scope variable. Array of objects such as - * [ - * { firstName: "John", lastName: "Robert" , ....., selected: false }, - * { firstName: "Jane", lastName: "Angel" , ....., selected: true }, - * { firstName: "Luke", lastName: "Skywalker" , ....., selected: true }, - * { firstName: "John", lastName: "Wayne" , ....., selected: true } - * ] - * - * item-label (String) (! REQUIRED !) - * The object property that you want to display on the button & checkboxes. Separate multiple values by space. - * Example: item-label="firstName lastName" - * - * item-ticker (String) (! IMPORTANT !): - * Column name with a boolean value that represent the state of a checkbox. - * For example: - * item-ticker is "selected" -> if selected === true, checkbox will be ticked. If selected === false, checkbox will not be ticked. - * item-ticker is "isOn" -> if isOn === true, checkbox will be ticked. If isOn === false, checkbox will not be ticked. - * If not specified, the default will be "selected" - * - * output-model: - * $scope variable. - * If specified, will list all the selected checkboxes model ( eg. input-model.selected === true ). - * - * orientation (String - "vertical" | "horizontal") - * Orientation of the list of checkboxes. - * If not specified, the default will be "vertical". - * - * max-labels (String) - * Maximum number of items that will be displayed in the dropdown button. If not specified, will display all selected items. - * Example: "2" -> Using the input-model above, then button will display the first two selected: "Jane Angel, Luke Skywalker, ..." - * - * max-height (String) - * Maximum height of the list of checkboxes in pixels. Will show scrollbar on overflow. - * Example: "100". - * - * is-disabled (Expression (similar with ng-disabled, see ) - * Disable or enable the checkboxes. - * If not specified, the default will be "false". - * */ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout', '$compile' , function ( $timeout, $compile ) { @@ -123,20 +58,20 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout' '<div ng-if="selectedItems.length > 0" ng-repeat="item in selectedItems | limitTo: varMaxLabels">' + '<span ng-if="$index > 0">, </span>{{writeLabel( item )}}' + '</div>' + - '<span ng-if="more">, ... [ Selected: {{selectedItems.length}} ]</span><span class="caret"></span>' + + '<div ng-if="more">, ... [ Selected: {{selectedItems.length}} ]</div><span class="caret"></span>' + '</button>' + '<div class="multiSelect checkboxLayer hide" style="{{layerStyle}}">' + '<div class="multiSelect line">' + 'Select: ' + - '<a ng-click="select( \'all\' )" class="multiSelect" >All</a> / ' + - '<a ng-click="select( \'none\' )" class="multiSelect" >None</a> / ' + - '<a ng-click="select( \'reset\' )" class="multiSelect" >Reset</a>' + + '<button type="button" ng-click="select( \'all\' )" class="multiSelect helperButton" >All</button> ' + + '<button type="button" ng-click="select( \'none\' )" class="multiSelect helperButton" >None</button> ' + + '<button type="button" ng-click="select( \'reset\' )" class="multiSelect helperButton" >Reset</button>' + '</div>' + '<div class="multiSelect line">' + 'Filter: <input class="multiSelect" type="text" ng-model="labelFilter" />' + - '<a class="multiSelect" ng-click="labelFilter=\'\'">Clear</a>' + + '<button type="button" class="multiSelect helperButton" ng-click="labelFilter=\'\'">Clear</button>' + '</div>' + - '<div ng-repeat="item in inputModel | filter:labelFilter" ng-class="orientation" class="multiSelect">' + + '<div ng-repeat="item in inputModel | filter:labelFilter" ng-class="orientation" class="multiSelect multiSelectItem">' + '<label class="multiSelect" ng-class="{checkboxSelected:item[ itemSelector ]}">' + '<input class="multiSelect" type="checkbox" ng-disabled="isDisabled" ng-checked="item[ itemSelector ]" ng-click="syncItems( item )" />' + '{{writeLabel( item )}}' + @@ -192,7 +127,8 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout' $scope.labelFilter = ''; - var multiSelectIndex = -1; + // We search them based on the class names + var multiSelectIndex = -1; var checkboxes = document.querySelectorAll( '.checkboxLayer' ); var multiSelectButtons = document.querySelectorAll( '.multiSelectButton' ); @@ -241,9 +177,9 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout' // What's written on the button $scope.writeLabel= function( item ) { var label = ''; - angular.forEach( item, function( value1, key1 ) { - var temp = $scope.itemLabel.split( ' ' ); - angular.forEach( temp, function( value2, key2 ) { + var temp = $scope.itemLabel.split( ' ' ); + angular.forEach( temp, function( value2, key2 ) { + angular.forEach( item, function( value1, key1 ) { if ( key1 == value2 ) { label += ' ' + value1; } |