AngularJS устанавливает значения раскрывающегося списка множественного выбора, используя selectize и ng-repeat - PullRequest
Новая
       28

AngularJS устанавливает значения раскрывающегося списка множественного выбора, используя selectize и ng-repeat

0 голосов
/ 06 сентября 2018

В этом примере ( JS Bin чистого тега выбора HTML ) я могу получить чистый выбор нескольких HTML.

Но я использую плагин selectize
https://selectize.github.io/selectize.js/
для выпадающего множественного выбора, и я запутался, как заполнить уже выбранные значения .?

Вот что я попробовал. Мой 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>

Мой клиент: 

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

Я загружаю selectize с помощью класса (selectSkill).

Без заполнения нормальная загрузка работает, но я пытаюсь установить значения с помощью динамического выбора.

помощь оценена спасибо.

Мои демонстрационные данные: 

**$scope.skills**

enter image description here

**item.storedArray**

enter image description here

1 Ответ

0 голосов
/ 05 октября 2018

Публикация примера, созданного мною, в качестве ответа, потому что он, похоже, помог ОП.

Совет здесь состоит в том, чтобы не смешивать использование Selectize с ng-model и ng-options, потому что они конфликтуют друг с другом по функциональности при применении к одному и тому же элементу select.

Если вы хотите использовать Selectize, лучше всего создать оболочку (т.е. директиву, как в моем примере), которая обеспечивает инициализацию select элементов, которые в этом нуждаются.

Кроме того, не забывайте, что, поскольку Selectize вызывает изменения данных вне контекста AngularJS, вам необходимо вручную запускать дайджесты (т. Е. scope.$apply()), чтобы код внутри AngularJS видел последние данные. 

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





  
    
  
{{ items | json }}
...