fix #2

Now data-* attributes on option changes can be detected.
lordfriend · Jun 25, 2014 · 16dbba0 · 16dbba0
1 parent 2fe742f
commit 16dbba0
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 5 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -64,7 +64,7 @@ <h3>Dynamic modify options</h3>
       <button type="button" class="btn btn-primary" ng-click="changeOptions('options1')">Change Options</button>
       <span>----></span>
       <select id="dynamic-options" class="nya-selectpicker" ng-model="myModel" data-container="body" multiple>
-        <option ng-repeat="option in options1" value="{{option}}">{{option}}</option>
+        <option ng-repeat="option in options1" value="{{option}}" data-content="<span class='label label-danger'>{{option}}</span>">{{option}}</option>
       </select>
     </form>
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nya-bootstrap-select",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "An angular directive wraps bootstrap-select",
   "repository": {
     "type": "git",

diff --git a/src/nya-bootstrap-select.js b/src/nya-bootstrap-select.js
@@ -30,6 +30,36 @@ angular.module('nya.bootstrap.select',[])
         // prevent selectDirective render an unknownOption.
         selectCtrl.renderUnknownOption = angular.noop;
         var optionArray = [];
+        /**
+         * Check option data attributes, text and value equality.
+         * @param opt the option dom element
+         * @param index the index of the option
+         * @returns {boolean}
+         */
+        var checkOptionEquality = function(opt, index) {
+          var isEqual = opt.value === optionArray[index].value && opt.text === optionArray[index].text;
+          if(isEqual) {
+            for(var i = 0; i< opt.attributes.length; i++){
+              if(opt.attributes[i].nodeName.indexOf('data-')!==-1) {
+                if(optionArray[index].attributes[opt.attributes[i].nodeName] !== opt.attributes[i].nodeValue) {
+                  isEqual = false;
+                  break;
+                }
+              }
+            }
+          }
+          return isEqual;
+        };
+
+        var resetDataProperties = function(opt) {
+          var attributes = opt.attributes;
+          for(var i = 0; i < attributes.length; i++) {
+            if(attributes[i].nodeName.indexOf('data-')!==-1) {
+              $(opt).data(attributes[i].nodeName.substring(5, attributes[i].nodeName.length), attributes[i].value);
+            }
+          }
+        };
+
         scope.$watch(function optionDOMWatch(){
           // check every option if has changed.
           var optionElements = $(element).find('option');
@@ -49,9 +79,10 @@ angular.module('nya.bootstrap.select',[])
           } else {
             var hasChanged = false;
             optionElements.each(function(index, value){
-              if(optionArray[index].text !== value.text || optionArray[index].value !== value.value) {
+              if(!checkOptionEquality(value, index)) {
+                // if check fails. reset all data properties.
+                resetDataProperties(value);
                 hasChanged = true;
-
               }
             });
             if(hasChanged) {
@@ -131,12 +162,24 @@ angular.module('nya.bootstrap.select',[])
           return key;
         }
 
+        /**
+         * Copy option value and text and data attributes to an array for future comparison.
+         * @param optionElements the source option elements. a jquery objects' array.
+         * @returns {Array} the copied array.
+         */
         function makeOptionArray(optionElements) {
           var optionArray = [];
           optionElements.each(function(index, childNode){
+            var attributes = {};
+            for(var i = 0; i < childNode.attributes.length; i++) {
+              if(childNode.attributes[i].nodeName.indexOf('data-')!==-1) {
+                attributes[childNode.attributes[i].nodeName] = childNode.attributes[i].nodeValue;
+              }
+            }
             optionArray.push({
               value: childNode.value,
-              text: childNode.text
+              text: childNode.text,
+              attributes: attributes
             });
           });
           return optionArray;

diff --git a/test/spec/ng-options-special.js b/test/spec/ng-options-special.js
@@ -151,4 +151,44 @@ describe('nya-bootstrap-select with ngOptions support and special scenario', fun
       expect($scope.myModel[index]).toEqual(text.toLowerCase());
     });
   });
+
+  it('should rebuild dropdown menu when data attribute changes in option', function() {
+    // define options and models before compile
+    $scope.options = [
+      {label: 'Alpha', value: 'alpha', color: 'red'},
+      {label: 'Bravo', value: 'bravo', color: 'blue'},
+      {label: 'Charlie', value: 'charlie', color: 'cyan'},
+      {label: 'Delta', value: 'delta', color: 'yellow'}
+    ];
+
+    $scope.$digest();
+
+    rootElement = $compile('<div class="select-container">' +
+        '<select class="nya-selectpicker" ng-model="myModel">' +
+          '<option ng-repeat="option in options" value="{{option.value}}" data-content="<span class=\'label\'>{{option.color}}</span>">{{option.label}}</option>' +
+        '</select>' +
+      '</div>')($scope);
+
+    $scope.$digest();
+
+    $scope.myModel = "alpha";
+
+    $scope.$digest();
+
+    runs(function(){
+      setTimeout(function(){
+        var selectElement = rootElement.children('.nya-selectpicker');
+        var dropdown = selectElement.next().find('.dropdown-menu.selectpicker');
+        var listElement = dropdown.children('li');
+        listElement.each(function(index, li) {
+          var liElement = $(li).find('a > span.label');
+          expect(liElement.length).toEqual(1);
+          expect(liElement.text()).toEqual($scope.options[index].color);
+        });
+      }, 100);
+    });
+
+    waits(200);
+
+  });
 });