我怎么可能实现采用了棱角分明一个选择元素有条件的分组？ [英] How might I implement conditional grouping in a Select element using angular?

问题描述

我想知道如果我能包括角NG选项的选择元素属性附加逻辑。

I would like to know if I can include additional logic in angular ng-options attribute for a Select element.

在一种情况下，我有一组是平的，没有与之相关联的分组选项。
在另一个，我有可能具有相同的描述多个选项，但是它们的ID的变化，因为它们各自分成类别。根据发送过来的数据，我想将其显示为分组要么与否进行分组。

In one case, I have a set of options that are flat and have no groupings associated with them. In another, I have multiple options that may have the same description, however their Id's vary because they are each grouped into categories. Based on the data sent over, I would like to display them as either grouped or not grouped.

分组：

<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>

有条件分组??

CONDITIONALLY GROUPED ??

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

If at all possible, I would like to avoid have two separate instances of the select element, however I do no think that the parser for the ngSelectDirective really takes any conditional logic.

在良好的思考方式来实现这样的事情？

Thoughts at good ways to implement something like this?

更新：
下面是建议尝试的样子......即使没有任何逻辑建立的字符串。

UPDATE: Here's how the suggested attempt looks...even without any of the 'logic' to build the string.

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

问题是，当我尝试结合它的结合似乎并不想坚持。如果我采取相同的生成的字符串和替换{{属性}}然后正常工作。我甚至可以在该字符串在加价所呈现铬确认。

Problem is when I try binding it the binding doesn't seem to want to stick. If I take the same generated string and replace the {{ property }} then it works fine. I can even confirm in chrome that the string is being rendered in the mark-up.

更新：
我已经证明，所建议的方法并在一个非常无菌的环境中工作。
http://jsfiddle.net/xbws8r5h/

必须有东西在我的环境是一个变种。

There must be something in my environment that is a variant.

推荐答案

就产生在JavaScript中（控制器）您的NG选项前pression。根据一些条件逻辑的分配不同的前pression。

Just generate your ng-options expression in JavaScript (controller). Depending of some conditional logic assign different expression.

例如：

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

和控制器可能是这样的：

And your controller might look like:

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";
}

此外，不应前pression是......对于项目在ctrl.Context.ItemList你的情况，而不是workType？

Also, shouldn't expression be "... for item in ctrl.Context.ItemList" instead of workType in your case?

另请参阅这个答案。

这篇关于我怎么可能实现采用了棱角分明一个选择元素有条件的分组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！