重新排序AngularJS ui中的选定项目-选择多个答案

【问题标题】：Reorder the selected items in AngularJS ui-select multiple重新排序AngularJS ui中的选定项目-选择多个
【发布时间】：2017-01-21 18:53:27
【问题描述】：

是否可以在 AngularJS ui-select 类型的 multiple 中自动重新排序所选项目？

这是一个代码示例，ui-select github 上还有更多

<ui-select multiple ng-model="ctrl.multipleDemo.colors" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 300px;" title="Choose a color">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in ctrl.availableColors | filter:$select.search">
  {{color}}
</ui-select-choices>

这是其行为的屏幕截图：

我想要的是重新排序的选定项目：即使当我选择项目时，我先选择了黄色，然后是绿色，然后是蓝色，我希望它是蓝色、绿色、黄色。

我看到了一个名为 sortable="true" 的属性，但它似乎没有达到我的预期。

【问题讨论】：

标签： javascript angularjs angular-ui-select

【解决方案1】：

尝试添加on-select="$select.selected.sort()":

<ui-select multiple 
         ng-model="ctrl.multipleDemo.colors" 
         on-select="$select.selected.sort()"
         theme="bootstrap" 
         ng-disabled="ctrl.disabled" 
         close-on-select="false" 
         style="width: 300px;" 
         title="Choose a color">
  <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
  <ui-select-choices repeat="color in ctrl.availableColors | filter:$select.search">
    {{color}}
  </ui-select-choices>
</ui-select>

更新的 plunker：http://plnkr.co/edit/Bms3pDdn6XnS2b7gsyQ5?p=preview

【讨论】：

感谢您的更新，如果 ui-select 的列表是字符串列表，它确实有效：vm.availableColors = ['Red','Green','Blue','Yellow' ,'洋红色','栗色','Umbra','绿松石'];但是我怎样才能让它与对象一起工作呢？例如如果 vm.availableColors = [{id: 1, name : 'Blue'}, {id: 2, name : 'Magenta'}, {id: 3, name : 'Yellow'}] ?
对于您的示例对象数组，您可以使用$select.selected.sort((a, b) => a.name.localeCompare(b.name))。这里我们使用自定义排序函数来比较字符串
感谢您的更新。对不起，我对 Javascript/Angular JS 很陌生，您能否使用 ui-select“对象数组（启用排序）”更新 plunker 以查看它是如何工作的。我尝试添加您提供的代码 <h3>Array of objects (sorting enabled)</h3> <ui-select multiple on-select="$select.selected.sort((a, b) = a.name.localeCompare(b.name))" ng-model="ctrl.multipleDemo.selectedPeople" ...> 但它在控制台中出现错误：Token ',' is unexpected, expecting [)] at column 25 of the expression [$select.selected.sort((a, b) = a.name.localeCompare....
对不起，我没有提到，你不能在 HTML 中添加这个函数作为角度表达式，所以，在 HTML 中我添加了一个在控制器中声明的函数，我更新了我的 plunker
你太棒了，非常感谢！如果可以的话，我会给你的答案 +10。