Question

我在项目中使用AngularJS模板。因为有很多控件，如文本框，下拉列表，日期选择器等。我想将drodown更改为多选。

我正在使用下面的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 dropdown的一部分

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中实现多选下拉列表的方向吗？

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>

使用xeditable

1 个答案: