CODEWITHSUNDEEP
angularjssemantic-ui
user3673649
user3673649

Reputation:

AngularJS with Semantic-UI's

I'm using Semantic-UI's multi-selection dropdown and I have the following directive in AngularJS in order to set the values of the dropdown:

.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);
        }
      });
    }
  };

The directive is being used as follows:

<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>

The list of tags is obtained via an AJAX request and the model may contain some values at start, also.

The user may use the already existing tags or enter new ones. If a new tag is added, I need to update my list of tags on the server, return it, and set the model accordingly again. But I'm having some issues on how to do this: the list of tags is being correctly updated, but the model isn't!

// 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;
};

The new added tags appear on the dropdown list menu, but as if they were not selected (added to the model).

Can you give me a helping hand?

Upvotes: 0

Views: 1020

Answers (1)

user3673649
user3673649

Reputation:

I managed to get it to work. It's still not perfect, but it is functional...!

On my directive, I included the following code to watch for any change in the list of tags and then update the model accordingly:

// 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);

Upvotes: 1

Related Questions