Multiselect dropdown in Angular js with xeditable

Question

Я использую шаблон AngularJS в своем проекте. В том, что у вас так много элементов управления, как текстовое поле, выпадающее меню, datepicker и т. Д. Я хочу изменить скорость, чтобы быть мультиселекцией.

Я использую xeditable.js из приведенных ниже

http://vitalets.github.io/angular-xeditable/

https://github.com/vitalets/angular-xeditable

Смотрите часть шаблонного HTML образца ниже

<div ng-controller="CriteriaCtrl" ng-cloak> 
 
    <div class="well editable-criteria span12" ng-show="hasKeys()"> 
 
    <div class="criteria-loading" ng-show="criterialoading"></div> 
 
    <ul ng-hide="criterialoading"> 
 
    <li ng-repeat="criteriaName in criteriaNames" class="{{criteriaName}}"> 
 
     <div ng-switch on="criteria[criteriaName].type"> 
 
     {{criteria[criteriaName].displayLabel}}: 
 
     <span ng-switch-when="text"> 
 
      <a href="#" editable-text="criteria[criteriaName].currentValue" 
 
       onbeforesave="updatetext($data, criteria[criteriaName].name)" 
 
       onshow="hideOtherPopups(criteriaName)"> 
 
       {{ criteria[criteriaName].currentDisplayValue || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} 
 
      </a> 
 
     </span> 
 
     <span ng-switch-when="dropdown"> 
 
      <a href="#" editable-select="criteria[criteriaName].currentValue.currentValue" 
 
       e-ng-options="p.currentValue as p.currentValueLabel for p in possible[criteriaName]" 
 
       onshow="hideOtherPopups(criteriaName)" 
 
       onbeforesave="updatedropdown($data, criteriaName)"> 
 
       {{criteria[criteriaName].currentValueLabel}} 
 
      </a> 
 
     </span> 
 
     <span ng-switch-when="date"> 
 
      <a href="#" editable-bsdate=" criteria[criteriaName].currentValue" 
 
       e-datepicker-popup="dd-MMMM-yyyy" onshow="makedatepicker(criteriaName)" 
 
       onbeforesave="updatedate($data, criteria[criteriaName].name)" 
 
       class="editable-date"> 
 
        {{ (criteria[criteriaName].currentValue | date:"dd/MM/yyyy") || empty }} 
 
      </a> 
 
     </span> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</div>

Часть xeditable для выпадающего списка

angular.module('xeditable').directive('editableSelect', ['editableDirectiveFactory', 
 
    function (editableDirectiveFactory) { 
 
     return editableDirectiveFactory({ 
 
      directiveName: 'editableSelect', 
 
      inputTpl: '<select class="xx" multiple="multiple"></select>', 
 
      autosubmit: function() {debugger 
 
       var self = this; 
 
       self.inputEl.bind('change', function() { 
 
        self.scope.$apply(function() { 
 
         self.scope.$form.$submit(); 
 
        }); 
 
       }); 
 
      } 
 
     }); 
 
    }]);

Из-за сложности проекта, я не в состоянии предоставить весь код сценария.

Мне просто нужно какое-то представление о том, как я могу пойти дальше для выбора выпадающего меню с несколькими вариантами выбора.

Я использую xeditable.js так же, как в приведенной выше ссылке. Несколько атрибутов изменяют внешний вид выпадающего списка. Мне нужно что-то вроде необходимости выбирать несколько элементов и разделять запятыми.

Может ли кто-нибудь указать направление для реализации выпадающего списка с несколькими избранными в AngularJS с xeditable?

Answer 1

Добавить в вашем xeditable.js

angular.module('xeditable').directive('editableMultiselect', ['editableDirectiveFactory', 
    function (editableDirectiveFactory) { 
     return editableDirectiveFactory({ 
      directiveName: 'editableMultiselect', 
      inputTpl: '<select size="6" multiple></select>', 
      autosubmit: function() { 
       var self = this; 
       self.inputEl.bind('change', function() { 
        self.scope.$apply(function() { 
         self.scope.$form.$submit(); 
        }); 
       }); 
      }    
     }); 
    }]); 

В вашей форме

<span editable-multiselect="user.name" e-name="name" e-ng-options="Status.ID as Status.name for Status in Users"> 
           {{user.name || 'Not Set'}} 
          </span>