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

Posted 2023-05-09

【中文标题】带有xeditable的Angular js中的多选下拉菜单

【英文标题】：Multiselect dropdown in Angular js with xeditable

【发布时间】：2015-08-14 23:36:08

【问题描述】：

我在我的项目中使用 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 实现多选下拉菜单的方向？

【参考方案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>

【讨论】：

我不确定你对我现有的代码做了什么改变。请更新有关您的代码的更多详细信息