Multiselect Dropdown in Angular js mit Xeditable

Question

Ich verwende eine AngularJS Vorlage in meinem Projekt. Mit so vielen Steuerelementen wie Textfeld, Dropdown, Datumsauswahl usw. Ich möchte die Drodown zu Multiselect ändern.

Ich verwende xeditable.js aus den unten diejenigen

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

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

Teil der Templat-html Probe Siehe unten

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

Ein Teil der xeditable für Drop-Down-

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(); 
 
        }); 
 
       }); 
 
      } 
 
     }); 
 
    }]);

Aufgrund der Komplexität des Projektes, ich bin gesamte HTML und Script-Code zu schaffen, nicht in der Lage.

Ich brauche nur eine Idee darüber, wie ich weiter für Dropdown-Option Multi-Select gehen kann.

Ich benutze xeditable.js die gleiche Weise wie in der Verbindung oben zur Verfügung gestellt. Mehrere Attribute ändern das Erscheinungsbild des Dropdown-Menüs. Ich möchte etwas wie müssen mehrere Elemente auswählen und durch Komma getrennt.

Kann jemand die Richtung für die Implementierung von Multi-Select-Dropdown in AngularJS mit Xeditable bereitstellen? In

Answer 1

in Ihrem 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(); 
        }); 
       }); 
      }    
     }); 
    }]); 

in Ihrem Formular

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