带有xeditable的Angular js中的多选下拉菜单

Question

我在我的项目中使用 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 for 下拉列表的一部分

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 的方式与上面提供的链接相同。多个属性修改下拉列表的外观。我想要类似需要选择多个项目并用逗号分隔的东西。

谁能提供在 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>