added output-model

1 files changed, 49 insertions, 27 deletions

diff --git a/angular-multi-select.js b/angular-multi-select.js
index 0e9657f..aa2bc96 100644
--- a/angular-multi-select.js
+++ b/angular-multi-select.js
@@ -9,9 +9,10 @@
  *
  *      <div
  *          multi-select 
- *          list-items="data" 
+ *          input-model="input_list"  *          
  *          item-label="firstName lastName" 
  *          item-ticker="selected"  
+ *          output-model="output_list"
  *          orientation="vertical" 
  *          max-labels="4"
  *          max-height="500"
@@ -28,7 +29,7 @@
  *
  * Attributes: 
  *
- *      list-items (REQUIRED):
+ *      input-model (! REQUIRED !):
  *          $scope variable. Array of objects such as
  *          [
  *              { firstName: "John", lastName: "Robert"     , ....., selected: false },
@@ -36,23 +37,35 @@
  *              { firstName: "Luke", lastName: "Skywalker"  , ....., selected: true },
  *              { firstName: "John", lastName: "Wayne"      , ....., selected: true }
  *          ]    
- *      item-label (string) (REQUIRED) 
+ *
+ *      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) (REQUIRED):
- *          Column name with a boolean value that represents the state of a checkbox. For example, in the list-items sample above, 
- *          the item-ticker is "selected". So if selected === true, checkbox will be ticked. If selected === false, checkbox will not be ticked.
+ *
+ *      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"
- *      orientation (string - "vertical" | "horizontal")
+ *
+ *      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)
+ *
+ *      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 list-items above, then button will display the first two selected: "Jane Angel, Luke Skywalker, ..."
- *      max-height (string)
+ *          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) 
+ *
+ *      is-disabled (String - "true" | "false") 
  *          Disable or enable the checkboxes. 
  *          If not specified, the default will be "false". 
  *
@@ -68,36 +81,37 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout'
 
         scope: 
         {
-            listItems   : '=',
+            inputModel  : '=',
+            outputModel : '=',
             itemLabel   : '@',
             itemTicker  : '@',
             orientation : '@',
             maxLabels   : '@',
             maxHeight   : '@',
-            isDisabled  : '=',
+            isDisabled  : '='
         },
 
         template: 
             '<span class="multiSelect inlineBlock">' +
-                '<button type="button" class="multiSelect button mainColor multiSelectButton" ng-click="toggleCheckboxes( $event ); refreshSelectedItems();">' +                                         
+                '<button type="button" class="multiSelect button multiSelectButton" ng-click="toggleCheckboxes( $event ); refreshSelectedItems();">' +                                         
                     '<div ng-if="selectedItems.length <= 0">None selected</div>' +                    
                     '<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">, ...</span><span class="caret"></span>' +                                        
+                    '<span ng-if="more">, ... [ Selected: {{selectedItems.length}} ]</span><span class="caret"></span>' +                                        
                 '</button>' +                
                 '<div class="multiSelect checkboxLayer hide" style="{{layerStyle}}">' +
                     '<div class="multiSelect line">' +
-                        'Tick: &nbsp;&nbsp;' + 
+                        'Select: &nbsp;&nbsp;' + 
                             '<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>' +
                     '</div>' +
                     '<div class="multiSelect line">' + 
                         'Filter: <input class="multiSelect" type="text" ng-model="labelFilter" />' +
-                            '<a class="multiSelect" ng-click="labelFilter=\'\'">[Clear]</a>' +
+                            '<a class="multiSelect" ng-click="labelFilter=\'\'">Clear</a>' +
                     '</div>' +
-                    '<div ng-repeat="item in listItems | filter:labelFilter" ng-class="orientation" class="multiSelect">' +
+                    '<div ng-repeat="item in inputModel | filter:labelFilter" ng-class="orientation" class="multiSelect">' +
                         '<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 )}}' +
@@ -115,16 +129,23 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout'
 
             $scope.syncItems = function( item ) {                                  
                 item[ $scope.itemSelector ] = !item[ $scope.itemSelector ];                                
-                $scope.refreshSelectedItems();                 
+                $scope.refreshSelectedItems();                   
             }     
 
             $scope.refreshSelectedItems = function() {
                 $scope.selectedItems = [];
-                angular.forEach( $scope.listItems, function( value, key ) {
+                angular.forEach( $scope.inputModel, function( value, key ) {
                     if ( value[ $scope.itemSelector ] === true || value[ $scope.itemSelector ] === 'true' ) {
-                        $scope.selectedItems.push( value );
+                        $scope.selectedItems.push( value );                        
                     }
                 });
+                
+                // Push into output model
+                if ( typeof attrs.outputModel !== 'undefined' ) {            
+                    $scope.outputModel = angular.copy( $scope.selectedItems );                    
+                }                                
+
+                // If max amount of labels displayed..
                 if ( $scope.selectedItems.length > $scope.maxLabels ) {
                     $scope.more = true;
                 }
@@ -136,7 +157,7 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout'
                 }
                 else {
                     $scope.varMaxLabels = $scope.maxLabels;
-                }                        
+                }                         
             }
 
             $scope.toggleCheckboxes = function( e ) {
@@ -171,17 +192,17 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout'
             $scope.select = function( type ) {
                 switch( type.toUpperCase() ) {
                     case 'ALL':
-                        angular.forEach( $scope.listItems, function( value, key ) {
+                        angular.forEach( $scope.inputModel, function( value, key ) {
                             value[ $scope.itemSelector ] = true;
                         });                
                         break;
                     case 'NONE':
-                        angular.forEach( $scope.listItems, function( value, key ) {
+                        angular.forEach( $scope.inputModel, function( value, key ) {
                             value[ $scope.itemSelector ] = false;
                         });                
                         break;      
                     case 'RESET':
-                        $scope.listItems = angular.copy( $scope.backUp );                        
+                        $scope.inputModel = angular.copy( $scope.backUp );                        
                         break;
                     default:                        
                 }
@@ -216,9 +237,10 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout'
             $scope.itemSelector = ( typeof $scope.itemTicker === 'string' ? $scope.itemTicker : 'selected' );
             $scope.refreshSelectedItems();                                                          
 
-            $scope.$watch( 'listItems' , function( newVal ) { 
+            // Watch for changes in input model
+            $scope.$watch( 'inputModel' , function( newVal ) { 
                 $scope.refreshSelectedItems();                                                                                              
-                $scope.backUp = angular.copy( $scope.listItems );                
+                $scope.backUp = angular.copy( $scope.inputModel );                
             });
 
             $scope.$watch( 'isDisabled' , function( newVal ) {