设置角度选择的动态选项

Question

我正在使用Angular-selected，我无法设置动态选项。

<div ng-init="delegate.getCategories()"> 
    <select chosen="" multiple="multiple" 
      ng-model="tags" ng-change="delegate.getCategories()" 
      ng-options="s.categoryName for s.categoryName in tagsList"> 
    </select> 
</div> 

我的控制器在页面加载类

getCategories: function(){ 
    constantsService.getCategories($scope.category, this.onGetCategories, this.onFailure); 
    alert($scope.category); 
}, 

onGetCategories:function(response){ 
    $scope.tagsList = response.categories; 
    alert(response); 
}, 

onFailure:function(response){ 
    alert(response); 
} 

初始化得到的类别构成后端和与集tagsList变量，但它不存在的HTML负载时。

Answer 1

我的指令角度挑选的工作不错，看代码：

HTML：

<select id="selectWithChosen" 
     name="selectWithChosen" 
     data-ng-model="theSelectedChosenValue" 
     data-ng-options="tp as tp.alias for tp in myList" 
     sgc-chosen 
     data-width="('100%')"> 
    <option value="">Select One Element</option> 
</select> 

的JavaScript其加载myList中

$http.get("/settings/myList").success(function(data) { 
    $scope.myList = data; 
}); 

的内容我可以获取用户选择的值用下面的代码：

//the value of my select with chosen is here, in JS: 
//**remember** the variable "theSelectedChosenValue" is only fill after you select the value on chosen component. 
$scope.theSelectedChosenValue; 

最后，我的角度，选择指令的实施：

"use strict"; 

// baseado em https://github.com/localytics/angular-chosen 
components.directive('sgcChosen', function($timeout) { 
    var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; 

    var CHOSEN_OPTION_WHITELIST, NG_OPTIONS_REGEXP, isEmpty, snakeCase; 

    NG_OPTIONS_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?(?:\s+group\s+by\s+(.*))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+(.*?)(?:\s+track\s+by\s+(.*?))?$/; 
    CHOSEN_OPTION_WHITELIST = ['noResultsText', 'allowSingleDeselect', 'disableSearchThreshold', 'disableSearch', 'enableSplitWordSearch', 'inheritSelectClasses', 'maxSelectedOptions', 
           'placeholderTextMultiple', 'placeholderTextSingle', 'searchContains', 'singleBackstrokeDelete', 'displayDisabledOptions', 'displaySelectedOptions', 'width']; 
    snakeCase = function(input) { 
     return input.replace(/[A-Z]/g, function($1) { 
     return "_" + ($1.toLowerCase()); 
     }); 
    }; 
    isEmpty = function(value) { 
     var key; 

     if (angular.isArray(value)) { 
     return value.length === 0; 
     } else if (angular.isObject(value)) { 
     for (key in value) { 
      if (value.hasOwnProperty(key)) { 
      return false; 
      } 
     } 
     } 
     return true; 
    }; 
    return { 
     restrict: 'A', 
     require: '?ngModel', 
     terminal: true,  
     link: function(scope, element, attr, ngModel) { 
     var chosen, defaultText, disableWithMessage, empty, initOrUpdate, match, options, origRender, removeEmptyMessage, startLoading, stopLoading, valuesExpr, viewWatch; 
     attr.noResultsText = attr.noResultsText ? attr.noResultsText : "'Sem resultados para: '"; 
     element.children('chosen-search').children().attr('maxlength', 100); 
     element.addClass('localytics-chosen'); 
     options = scope.$eval(attr.chosen) || {}; 

     angular.forEach(attr, function(value, key) { 
      if (__indexOf.call(CHOSEN_OPTION_WHITELIST, key) >= 0) { 
      return options[snakeCase(key)] = scope.$eval(value); 
      } 
     }); 

     startLoading = function() { 
      return element.addClass('loading').trigger('chosen:updated'); 
     }; 

     stopLoading = function() { 
      scope.$evalAsync(function() { 
       return element.removeClass('loading').trigger('chosen:updated'); 
      }); 
     }; 

     chosen = null; 
     defaultText = null; 
     empty = false; 

     initOrUpdate = function() { 
      if (chosen) { 
      scope.$evalAsync(function() { 
       return element.trigger('chosen:updated'); 
      }); 
      } else { 
      chosen = element.chosen(options).data('chosen'); 
      chosen.search_field[0].setAttribute('maxlength', 100); 
      return defaultText = chosen.default_text; 
      } 
     }; 

     removeEmptyMessage = function() { 
      empty = false; 
      return element.attr('data-placeholder', defaultText); 
     }; 

     disableWithMessage = function() { 
      empty = true; 
      scope.$evalAsync(function() { 
       return element.attr('data-placeholder', '').attr('disabled', true).trigger('chosen:updated'); 
      }); 
     }; 

     if (ngModel) { 
      origRender = ngModel.$render; 
      ngModel.$render = function() { 
      origRender(); 
      return initOrUpdate(); 
     }; 

     viewWatch = function() { 
      return ngModel.$viewValue; 
     }; 

     scope.$watch(viewWatch, ngModel.$render, true); 
     } else { 
      initOrUpdate(); 
     } 

     attr.$observe('disabled', function(isDisabled) { 
      scope.$evalAsync(function() { 
       element.prop('disabled', isDisabled); 
       element.trigger('chosen:updated'); 
      }); 
      return true; 
     }); 

     if (attr.ngOptions && ngModel) { 
      match = attr.ngOptions.match(NG_OPTIONS_REGEXP); 
      valuesExpr = match[7]; 
      return scope.$watchCollection(valuesExpr, function(newVal, oldVal) { 
      if (angular.isUndefined(newVal)) { 
       return startLoading(); 
      } else { 
       if (empty) { 
       removeEmptyMessage(); 
       } 
       stopLoading(); 
       if (isEmpty(newVal)) { 
       return disableWithMessage(); 
       } else { 
        element.attr('data-placeholder', '').attr('disabled', false).trigger('chosen:updated'); 
       } 
      } 
      }); 
     } 
     } 
    }; 
    }); 

这个角度挑选的代码可以HERE。