Trình đơn thả xuống nhiều lựa chọn trong js góc với xeditable

Question

Tôi đang sử dụng mẫu AngularJS trong dự án của mình. Trong đó có rất nhiều điều khiển như hộp văn bản, dropdown, datepicker vv .. Tôi muốn thay đổi các drodown được multiselect.

Tôi đang sử dụng xeditable.js từ những người dưới đây

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

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

Xem phần của mẫu html templated dưới

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

Một phần của xeditable cho thả xuống

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

Do tính phức tạp của dự án, tôi không thể cung cấp toàn bộ html và mã kịch bản.

Tôi chỉ cần một số ý tưởng về cách tôi có thể tiếp tục cho tùy chọn thả xuống nhiều lựa chọn.

Tôi đang sử dụng xeditable.js theo cách tương tự như trong liên kết được cung cấp ở trên. Nhiều thuộc tính sửa đổi giao diện của menu thả xuống. Tôi muốn một cái gì đó như cần phải chọn nhiều mục và cách nhau bằng dấu phẩy.

Có ai có thể cung cấp hướng thực hiện thả xuống nhiều lựa chọn trong AngularJS với xeditable không?

Answer 1

Thêm vào xeditable.js bạn

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

Trong Form của bạn

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