Angular JS 表单：ng-options 和复杂的选项操作

Question

我在使用几个不同的选择框时遇到了一些问题。

---

问题 #1

首先是一个框，列出了按“状态”或“状态外”分组的物理位置。我将它们分组，值和标签设置为我想要的方式，但我无法让分组选项按字母顺序排序。我尝试了 orderBy:'name' 和其他似乎对其他人有效的解决方案。

我的 html 看起来像这样：

<select name="dealer" id="dealer" ng-model="warrantyReg.dealer" ng-options="dealer as dealer.selectLabel group by dealer.for for dealer in dealers track by dealer.selectValue | orderBy:'selectLabel'">

我的经销商数组中的一些示例：

$scope.dealers = [
    {selectLabel:"Location A", selectValue:255, for:"In state"},
    {selectLabel:"Location C", selectValue:1, for:"In state"},
    {selectLabel:"Location B", selectValue:5, for:"In state"},
    {selectLabel:"Location Z", selectValue:25, for:"Out of state"},
    {selectLabel:"Location X", selectValue:55, for:"Out of state"},
    {selectLabel:"Location Y", selectValue:50, for:"Out of state"}
];

（请注意，这是对象的简化版本，它们包含的信息比我在这里展示的要多得多。）

无论我做什么，这些选项都不会按 selectLabel 排序。我也试过 orderBy:'dealer.selectLabel'，但它什么也没做。

更新 我忘了提到 $scope.dealers 是由 angular.forEach() 根据服务返回的数据构建的。我遍历每个返回的经销商并通过连接名称和位置键然后将该值推入 $scope.dealers 数组来创建 selectLabel。

在 $scope.dealers 上使用 .sort() 没有任何作用。但是，如果我在通过 angular.forEach() 传递从服务返回的数据之前使用 .sort() ，它会对它们进行排序。我不确定有什么区别，但这至少是一种解决方案，也是我现在正在做的事情。

---

问题 #2

我想要一个带有“其他...”选项的选择框，当它被选中时会提供一个文本字段。那部分我正在工作，但如果我将任何选项组合在一起，我无法在项目列表底部显示“其他...”选项。

例如我有这个数据集：

$scope.refs = [
    {name:'Friend'},
    {name:'Walk-in'},
    {name:'Yellow pages'},
    {name:'Field and Stream', type:'Magazines'},
    {name:'Parent', type:'Magazines'},
    {name:'Guns & Ammo', type:'Magazines'},
    {name:'other...'}
];

使用该示例，“其他...”始终出现在“黄页”和“杂志”组标题之间。

此外，我还有另一个数据集，其中包含两组分组项目，其中包含未分组的“其他...”选项，并且在两个组上方显示“其他...”选项。

有没有办法将“其他...”选项放在包含分组项目的列表底部？

更新 由于这似乎没有解决方案，我只会将选项设为静态 html，而不是依赖 ng-options 来生成它们。如果代码是要在多个地方使用的选择字段，我可以将代码放入包含中。

Answer 1

问题 #1

为什么不对控制器中的值进行排序：

$scope.dealers = [
    {selectLabel:"Location B", selectValue:255, for:"In state"},
    {selectLabel:"Location C", selectValue:1, for:"In state"},
    {selectLabel:"Location A", selectValue:5, for:"In state"},
    {selectLabel:"Location Z", selectValue:25, for:"Out of state"},
    {selectLabel:"Location X", selectValue:55, for:"Out of state"},
    {selectLabel:"Location Y", selectValue:50, for:"Out of state"}
].sort(function(a,b){ 
    return a.selectLabel.localeCompare(b.selectLabel); 
});

问题 #2

似乎不可能。看到这个answer。