Differentiating arrow clicks between multiple UI-Select controls on one page

Question

Hi I would like to customize behavior of the ui-select little bit. I use two bootstap themed ui-select controls on my page with the help of templatecaches. In the template, I wired up arrow button click event using ng-click tag. That way I can easily catch the click event on the arrow button, and in my controller I can open a popup using function, for instance:

<button ng-click = "someFunctionInTheScope()">

For instance if I have two of those ui-select elements in my view, I need to differentiate which arrow button is clicked to display the correct popup. Since I am using the same template for two ui-select controls and since theoretically I can have any number of these controls on my page, I can not easily add a parameter to the method in the template to differentiate which arrow image of which ui-select control is clicked:

<button ng-click= "someFunctionInTheScope(1)">

Because both ui-select control would be using the same template code and 1 would be passed to the controller function for both of them.

Therefore I need to find a more clever way of changing the template dynamically once and for each control.

So I thought about having something like

<button ng-click= "someFunctionInTheScope($select.id)">

but when I debug it I see that functions parameter is undefined, every time it is clicked.

Can somebody please show me how to hack this?

Answer 1

There is no id property on the $select object. You're best bet is to pass something through the scope of the element containing the ui-select boxes. In other words, your code needs to generate a unique identifier for each ui-select box you have. This could be the $index property of an ng-repeat block, a timestamp, or something dependent on other context.

A little more context and I can provide a more specific answer.