3

I'm using AngularUI's UI-Select to create rich selects in my application, and I'm trying to bind the allow-clear attribute to a function or property on the scope:

<ui-select ng-model="$parent.model" theme="bootstrap">
    <ui-select-match placeholder="..." allow-clear="$parent.allowClear">{{$select.selected.DisplayText}}</ui-select-match>
    <ui-select-choices repeat="opt.ID as opt in operators">
        {{opt.DisplayText}}
    </ui-select-choices>
</ui-select>

But no matter what I try, couldn't get it to work. Then I found the following code on UI-Select source code, under uiSelectMatch directive definition:

    $select.allowClear = (angular.isDefined(attrs.allowClear)) ? (attrs.allowClear === '') ? true : (attrs.allowClear.toLowerCase() === 'true') : false;

that could mean it's doing a string comparison for the attribute value.

Is there any way that I can work around this and bind the attribute (even a one-time binding during the initialization)?

Iravanchi
  • 5,139
  • 9
  • 40
  • 56

1 Answers1

4

If I got you right, you could just wrap your value in {{...}} to make it work, like this:

<ui-select-match placeholder="..." allow-clear="{{!!$parent.allowClear}}">{{$select.selected.DisplayText}}</ui-select-match>

See little Demo.

Ilya Luzyanin
  • 7,910
  • 4
  • 29
  • 49
  • Thanks, this works. I needed to add double-not operator thou, for the cases that the scope variable is not set (`{{!!allowClear}}`). This is because UI-Select will treat existence of empty attribute as a true. – Iravanchi Feb 17 '15 at 07:54
  • Good point! I've updated the answer and demo, just in case. Thank you! – Ilya Luzyanin Feb 17 '15 at 10:44