How might I implement conditional grouping in a Select element using angular?

Question

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

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.

GROUPED:

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

NOT GROUPED:

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

CONDITIONALLY GROUPED ??

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.

UPDATE: I have proven that the suggested method does work in a very sterile environment. http://jsfiddle.net/xbws8r5h/

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

Nonperishable

Why are you trying to write ctrl.optionStr. If should be just optionStr. You define controller object in ng-controller, e.g. <div ng-controller="MyCtrl"><select ... ></div> all the bindings are resolved in the context of this controller. Read more e.g. here. – Towardly

i am using ControllerAs syntax across my application...not relying directly on $scope...I have proved that it's not the problem as well as attempting to run $scope.$apply and there is still no change – Nonperishable

Updated to include a fiddle of a working version. Problem is, my environment doesn't behave the same way...looking deeper. – Nonperishable

Yeah, indeed it seems to be working on your fiddle. I'm afraid I can't help you why it isn't working in your environment. At least unless you somehow manage to recreate the problem on fiddle. – Towardly

sure...totally understand...this will be the gateway question...will try to replicate the environment...it involves the resolution of an external API call...which could be the kicker – Nonperishable

why not use ng-repeat if those options are that complex? – Zeta

ng-repeat with grouping options would result in two nested repeats and I'd like to avoid it. this is probably a timing issue... – Nonperishable

Answer 1

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

For example:

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

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

See also this answer .

Towardly

ha...yup...changed 'workType' --> item...didn't pull them all out – Nonperishable

I can bind the string that is generated by my controller, but when I {{ stickThePropertyInBrackets }} the binding doesn't seem to work with the object reference – Nonperishable