AngularJS set values of multi-select drop-down using selectize and ng-repeat

Question

With this example ( JS Bin of pure html select tag ) I can able to achieve the pure html select multiple.

But I am using the selectize plugin
https://selectize.github.io/selectize.js/
for dropdown multi-select and i am confused how to populate the already selected values.?

This is what i tried My HTML:

<div ng-repeat="item in items">

<select  
multiple 
class="selectSkill"
ng-model="item.storedArray"
ng-options="opt.skillId as opt.skillName for opt in skills"
></select>

</div>

My Client:

$scope.$selectSkill= $('.selectSkill').selectize({
    valueField: 'skillId',
    labelField: 'skillName',
    searchField: 'skillName',
    maxItems: 5,
    placeholder:"Select Skill",
    options: $scope.skills,
    create: false,
    sortField: {
        field: 'skillName',
        direction: 'asc'
    }
});
$scope.selectizeControlSkills = $scope.$selectSkill[0].selectize;

I am loading selectize with class-based(selectSkill).

Without populate normal load is working but I'm trying to set values using selectize dynamically.

help is appriciated thank you.

My Demo data:

**$scope.skills**

**item.storedArray**

If you're going to use selectize.js, you shouldn't mix it with ng-model and ng-options because the latter won't work. Here's a minimal working example based on your snippets - plnkr.co/edit/0JvCrB1QfaRMk3kFBcsf?p=preview — miqh
– miqh, Commented Sep 6, 2018 at 0:19
@miqh thank you it worked. can u post the link as answer i will accept. — Mr world wide
– Mr world wide, Commented Oct 4, 2018 at 14:57

miqh · Accepted Answer · 2018-10-04 22:08:34Z

Posting the example I created as an answer because it appeared to help the OP.

The advice here is to not mix the use of Selectize with ng-model and ng-options because they conflict with each other in functionality if applied to the same select element.

If you want to use Selectize, it's best to create a wrapper (i.e. a directive, as in my example) that provides the initialisation on select elements that need it.

Also, don't forget that since Selectize causes data changes outside the context of AngularJS, you'll need to manually trigger digests (i.e. scope.$apply()) to ensure code inside AngularJS sees the latest data.

angular
  .module('app', [])
  .controller('ctrl', function ($scope) {
    $scope.items = [
      { storedArray: ['078...'] },
      { storedArray: [] },
      { storedArray: ['0cc...'] },
    ];
    $scope.skills = [
      { skillId: '078...', skillName: 'Java' },
      { skillId: '0cc...', skillName: 'Cisco UCS' },
    ];
    $scope.itemSelectizeOptions = $scope.items.map(function (item) {
      return {
        valueField: 'skillId',
        labelField: 'skillName',
        options: $scope.skills,
        items: item.storedArray,
        onChange: function (newItems) {
          item.storedArray = newItems;
          // `$apply()` needed because change occurs outside of AngularJS's knowledge
          $scope.$apply();
        }
      };
    })
  })
  .directive('selectize', function () {
    return {
      scope: {
        selectize: '<',
      },
      link: function (scope, el) {
        var selectize = $(el).selectize(scope.selectize);
      },
    };
  });

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="options in itemSelectizeOptions">
    <select
      multiple
      selectize="options"></select>
  </div>
  <pre>{{ items | json }}</pre>
</div>

Collectives™ on Stack Overflow

AngularJS set values of multi-select drop-down using selectize and ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related