javascript - 具有xeditable的Angular js中的多选下拉列表

我在我的项目中使用AngularJS模板。由于具有许多控件，例如文本框，下拉列表，日期选择器等。我想将下拉列表更改为多选。

我正在使用下面的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();
                  });
              });
          }
      });
  }]);

由于项目的复杂性，我无法提供完整的html和脚本代码。

我只需要一些关于如何进一步选择多选下拉菜单的想法。

我使用xeditable.js的方式与上面提供的链接相同。多个属性可修改下拉菜单的外观。我想要一些需要选择多个项目并用逗号分隔的项目。

谁能提供使用xeditable在AngularJS中实现多选下拉菜单的指导？

最佳答案

添加您的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>