Fix validation bug, replaced alert with console, and updated HTML sample

4 files changed, 59 insertions, 32 deletions

diff --git a/README.md b/README.md
index b304fb2..05c64b8 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,9 @@ Usage
         output-model="output_list"
         orientation="vertical" 
         max-labels="4"
-        is-disabled="multi_select_state" >
+        is-disabled="multi_select_state" 
+        directive-id="ms1"
+        >
     </div>
     
         // or this one, but not really tested, so be careful with browser compatibility.
@@ -87,13 +89,16 @@ Expression to be evaluated. Will disable or enable the checkboxes.
 <br />If not specified, the default will be "false". 
 <br />(Similar with ng-disabled, see http://docs.angularjs.org/api/ng/directive/ngDisabled)
 
+##### directive-id
+Name or id for your directive. There are some validations and error message in the directive, and this id will help to check which directive displays error message in case you use more than one directive in one page.
+
 Note
 --
 I use HTML entity 9662 for the caret (downward pointing arrow). If you want a better looking arrow, you can use the .caret class in the CSS file. Just create a span using that .caret. Do note that this span won't toggle the dropdown. You need to click outside the span.
 
 Requirements
 --
-AngularJS v1.2.15 is used in the script.
+Created using AngularJS v1.2.15. Other versions may or may not work.
 
 Browser Compatibility
 --
diff --git a/angular-multi-select.css b/angular-multi-select.css
index 6a48c6b..ad4372a 100644
--- a/angular-multi-select.css
+++ b/angular-multi-select.css
@@ -1,5 +1,5 @@
 body {
-    font-family: "Verdana";
+    font-family: "Arial";
     font-size: 14px;
 }
 .multiSelect {             
diff --git a/angular-multi-select.js b/angular-multi-select.js
index e382a78..e46360b 100644
--- a/angular-multi-select.js
+++ b/angular-multi-select.js
@@ -47,7 +47,8 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout'
             tickProperty    : '@',
             orientation     : '@',
             maxLabels       : '@',
-            isDisabled      : '='
+            isDisabled      : '=',
+            directiveId     : '@'
         },
 
         template: 
@@ -194,6 +195,7 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout'
 
             // Select All / None / Reset
             $scope.select = function( type ) {
+                var temp = [];
                 switch( type.toUpperCase() ) {
                     case 'ALL':
                         angular.forEach( $scope.inputModel, function( value, key ) {
@@ -220,20 +222,17 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout'
 
             // Generic validation for required attributes
             validate = function() {
-                if ( typeof $scope.inputModel === 'undefined' ) {
-                    alert( 'multi-select ERROR - input model is not defined!' );
+                if ( !( 'inputModel' in attrs )) {
+                    console.log( 'Multi-select error: input model is not defined! (ID: ' + $scope.directiveId + ')' );
                 }
 
-                if ( typeof $scope.itemLabel === 'undefined' ) {
-                    alert( 'multi-select ERROR - item label is not defined!' );                
+                if ( !( 'itemLabel' in attrs )) {
+                    console.log( 'Multi-select error: item label is not defined! (ID: ' + $scope.directiveId + ')' );                
                 }            
 
-                if ( typeof $scope.tickProperty === 'undefined' ) {
-                    alert( 'multi-select ERROR - tick property is not defined!' );                
-                }
-            
-                validateProperties( $scope.itemLabel.split( ' ' ), $scope.inputModel );
-                validateProperties( new Array( $scope.tickProperty ), $scope.inputModel );
+                if ( !( 'tickProperty' in attrs )) {
+                    console.log( 'Multi-select error: tick property is not defined! (ID: ' + $scope.directiveId + ')' );                
+                }            
             }
 
             // Validate whether the properties specified in the directive attributes are present in the input model
@@ -255,22 +254,24 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout'
                     }
                 });    
                 if ( notThere === true ) {
-                    alert( 'multi-select ERROR:\n\nProperty "' + missingLabel + '" is not available in the input model.' );
+                    console.log( 'Multi-select error: property "' + missingLabel + '" is not available in the input model. (Name: ' + $scope.directiveId + ')' );
                 }
                 
             }
 
-            /////////////////////
+            ///////////////////////
             // Logic starts here
-            /////////////////////
-                    
-            validate();
+            ///////////////////////               
 
-            $scope.refreshSelectedItems();                                                          
+            validate();
+            $scope.refreshSelectedItems();                  
 
             // Watch for changes in input model (allow dynamic input)
             $scope.$watch( 'inputModel' , function( oldVal, newVal ) {                 
-                validate();
+                if ( $scope.inputModel !== 'undefined' ) {
+                    validateProperties( $scope.itemLabel.split( ' ' ), $scope.inputModel );
+                    validateProperties( new Array( $scope.tickProperty ), $scope.inputModel );
+                }
                 $scope.backUp = angular.copy( $scope.inputModel );                                                    
                 $scope.refreshSelectedItems();                                                 
             });
@@ -287,7 +288,7 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$timeout'
                     for( i=0; i < checkboxes.length; i++ ) {                                        
                         checkboxes[i].className = 'multiSelect checkboxLayer hide';                        
                     }
-                    $scope.$apply();                    
+                    // $scope.$apply();                    
                     e.stopPropagation();
                 }                                
             });           
diff --git a/multiselect.htm b/multiselect.htm
index 6495f9e..e0dbea0 100644
--- a/multiselect.htm
+++ b/multiselect.htm
@@ -13,6 +13,10 @@
     
 <body ng-controller="main">
 
+    * Open your browser console to see the $scope variables updated
+    <br />
+    <br />
+
     Minimal: 
     <br />
     <div
@@ -34,13 +38,14 @@
         item-label="firstName lastName" 
         tick-property="checked" 
         orientation="horizontal"
-        max-labels="3"        
+        max-labels="3"     
+        directive-id="multiSelectFull"
         >
     </div>
 
     <br /><br />
 
-    Use element instead of attribute, update input model on the fly, and toggle checkbox state
+    Use element instead of attribute, load input model on the fly, and toggle checkbox state
     <br />
     <multi-select 
         input-model="dynamicData" 
@@ -77,19 +82,20 @@ myApp.controller( 'main' , [ '$scope' , function ($scope) {
     $scope.minData = [
         { id: 1, firstName: "Peter",    lastName: "Parker",     selected: false },
         { id: 2, firstName: "Mary",     lastName: "Jane",       selected: false },
-        { id: 3, firstName: "Bruce",    lastName: "Wayne",      selected: true, },
+        { id: 3, firstName: "Bruce",    lastName: "Wayne",      selected: true },
         { id: 4, firstName: "David",    lastName: "Banner",     selected: false },
         { id: 5, firstName: "Natalia",  lastName: "Romanova",   selected: false },
         { id: 6, firstName: "Clark",    lastName: "Kent",       selected: true },
     ];
 
     // Open your console and watch minData changes
-    $scope.$watch( "minData" , function( newVal ) {        
+    $scope.$watch( "minData" , function( newVal ) {                 
         angular.forEach( newVal , function( value, key ) {                    
             if ( value.selected === true ) {
                 console.log( 'minData .selected === true: ' + value.firstName + ' ' + value.lastName );
             }
         });
+        console.log( '--------' );
     }, true );                
 
 
@@ -116,15 +122,19 @@ myApp.controller( 'main' , [ '$scope' , function ($scope) {
                console.log( 'fullData .checked === true: ' + value.firstName + ' ' + value.lastName );
             }
         });
+        console.log( '--------' );         
     }, true );         
 
     // Open your console and watch resultData changes
-    $scope.$watch( "resultData" , function( newVal ) {
-        angular.forEach( newVal , function( value, key ) {                    
-            if ( value.checked === true ) {
-               console.log( 'resultData .checked === true: ' + value.firstName + ' ' + value.lastName );
-            }
-        });
+    $scope.$watch( "resultData" , function( newVal, oldVal ) {        
+        if ( $scope.resultData.length > 0 && !angular.equals( oldVal, newVal ) ) {
+            angular.forEach( newVal , function( value, key ) {                    
+                if ( value.checked === true ) {
+                   console.log( 'resultData .checked === true: ' + value.firstName + ' ' + value.lastName );
+                }
+            });
+            console.log( '--------' );
+        }
     }, true );    
 
 
@@ -162,6 +172,17 @@ myApp.controller( 'main' , [ '$scope' , function ($scope) {
         { car: 'Lamborgini' , ticked: true },                
     ];
 
+    // Open your console and watch dynamicData changes
+    $scope.$watch( "dynamicData" , function( newVal, oldVal ) {        
+        if ( !angular.equals( oldVal, newVal ) ) {
+            angular.forEach( newVal , function( value, key ) {                    
+                if ( value.ticked === true ) {
+                   console.log( 'dynamicData .ticked === true: ' + value.car );
+                }
+            });
+            console.log( '--------' ); 
+        }
+    }, true );                 
 }]);    
 
 </script>