Question

我正在使用Semantic-UI的多选下拉菜单，我在AngularJS中有以下指令，以便设置下拉列表的值：

.directive('suiSelectionDropdown', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, modelCtrl) {
      if(!modelCtrl) return;

      // the timeout ensures that Semantic-UI's dropdown is set only after
      // AngularJS had a chance to unroll the repeater that creates the options.
      $timeout(function() {
        element.dropdown('set selected', modelCtrl.$viewValue);
      }, 0);

      var allow;
      if(attrs.suiSelectionDropdown === 'allowAdditions') allow = true;
      else allow = false;

      element.dropdown({
        allowAdditions: allow,
        maxSelections: attrs.maxSelections || undefined,
        inline: true,
        onChange: function (value, text, $choice) {
          modelCtrl.$setViewValue(value);
        }
      });
    }
  };

该指令的使用方法如下：

<div class="ui multiple search selection dropdown" ng-model="(info).slide.tags"
                                                   sui-selection-dropdown="allowAdditions"
                                                   max-selections="5">
  <input name="tags" type="hidden" value="">
  <i class="dropdown icon"></i>
  <div class="default text"></div>
  <div class="menu">
    <div class="item" ng-repeat="tag in tagList track by (tag._id)" data-value="{{tag._id}}">{{tag.name}}</div>
  </div>
</div>

标签列表是通过AJAX请求获得的，模型在开始时也可能包含一些值。

用户可以使用现有标签或输入新标签。如果添加了新标记，我需要更新服务器上的标记列表，将其返回，然后再次相应地设置模型。但是我有一些关于如何做到这一点的问题：正在更新标签列表，但模型不是！

// Controller
Edition.updateInformation(obj, modified)
  .then(function(response) {
      prevInfo = angular.copy(obj);
      Tag.getAllTags()
         .then(function(response) {
           $scope.tagList = Tag.retrieveTagList();
         }); 
  });

// Service
tag.retrieveTagList = function() {
  return tagList;
};

tag.getAllTags = function() {
  var defer = $q.defer();

  $http({
    method: 'GET',
    url: '/api/extra/tags',
    skipAuthorization: true // the Bearer token will not be sent
  }).success(function(response) {
    angular.copy(response.tags, tagList);
    defer.resolve(response);
  }).error(function(response) {
    defer.reject(response);
  });

  return defer.promise;
};

新添加的标签显示在下拉列表菜单中，但好像没有选择它们（添加到模型中）。

你能帮助我吗？

Answer 1

我设法让它发挥作用。它仍然不完美，但功能正常......！

在我的指令中，我包含以下代码以监视标记列表中的任何更改，然后相应地更新模型：

// watch for any changes in the list of tags
// every time a new tag is added we need to update the list of tags and the model accordingly
scope.$watch('tagList', function(newValue, oldValue) {
  if(newValue && newValue !== oldValue) {
    var temp = modelCtrl.$viewValue;
    element.dropdown('clear');
    $timeout(function() {
      element.dropdown('set selected', temp);
    }, 0);
  }
}, true);

具有语义UI的AngularJS

1 个答案: