如何使用角度在 Select 元素中实现条件分组？

Question

我想知道是否可以在 Select 元素的角度 ng-options 属性中包含其他逻辑。

在一种情况下，我有一组平坦的选项，并且没有与之关联的分组。 在另一个方面，我有多个选项可能具有相同的描述，但是它们的 ID 会有所不同，因为它们都被分组到类别中。根据发送过来的数据，我想将它们显示为分组或未分组。

分组：

<select ng-model="tcCtrl.SelectedItem" 
        ng-options="item.Id + ' - ' + item.Description 
                    group by item.GroupDescription 
                    for item in ctrl.Context.ItemList }"></select>

未分组：

<select ng-model="tcCtrl.SelectedItem" 
        ng-options="item.Id + ' - ' + item.Description 
                    for item in ctrl.Context.ItemList }"></select>

按条件分组？？

如果可能的话，我想避免选择元素有两个单独的实例，但是我不认为 ngSelectDirective 的解析器真的需要任何条件逻辑。

想好办法来实现这样的事情？

更新： 以下是建议尝试的样子……即使没有任何“逻辑”来构建字符串。

var optionStr = "item.Id for item in ctrl.Context.Items";
...<select ng-options="{{ ctrl.optionStr }}"></select>...

问题是当我尝试绑定它时，绑定似乎不想粘住。如果我采用相同的生成字符串并替换 {{ property }} 那么它工作正常。我什至可以在 chrome 中确认字符串正在标记中呈现。

更新： 我已经证明建议的方法在非常无菌的环境中确实有效。 http://jsfiddle.net/xbws8r5h/

我的环境中一定有某种变体。

Answer 1

只需在 JavaScript（控制器）中生成您的 ng-options 表达式。根据某些条件逻辑分配不同的表达式。

例如：

<select ng-model="tcCtrl.SelectedItem" 
        ng-options="{{ selectOptions }}"></select>

你的控制器可能看起来像：

if(groupCondition){
  $scope.selectOptions = "item.Id + ' - ' + item.Description 
                group by item.GroupDescription 
                for workType in ctrl.Context.ItemList";
} else {
  $scope.selectOptions = "item.Id + ' - ' + item.Description for workType in ctrl.Context.ItemList";
}

另外，在您的情况下，表达式不应该是“... for item in ctrl.Context.ItemList”而不是 workType 吗？

另见this answer。