Elenco a discesa a selezione multipla in J angolare con xeditable

Question

Sto utilizzando un modello AngularJS nel mio progetto. In quanto con così tanti controlli come textbox, dropdown, datepicker ecc. Voglio cambiare il drodown per essere multiselect.

sto usando xeditable.js da quelli sottostanti

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

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

vedere una parte del campione html su modelli sotto

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

Parte della xeditable per discesa

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

A causa della complessità del progetto, io non sono in grado di fornire tutto il codice HTML e script.

Ho solo bisogno di qualche idea su come posso andare oltre per l'opzione di selezione multipla.

Sto usando xeditable.js nello stesso modo del collegamento fornito sopra. Più attributi modificano l'aspetto del menu a discesa. Voglio qualcosa come bisogno di selezionare più elementi e separati da una virgola.

Qualcuno può fornire la direzione per implementare il menu a discesa multi-selezione in AngularJS con xeditable?

Answer 1

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

nel modulo

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