Angularjs: Ui-select ng-click in ui-select-choices

Question

I am trying to use an add button inside the options, but the problem is that ng-click fires but the option is not selected.

<ui-select ng-model="datactrl.newservice.selected" theme="selectize" ng-disabled="disabled" style="width: 100%;">
    <ui-select-match placeholder="...">
        <span ng-bind-html="$select.selected.name"></span>          
    </ui-select-match>
    <ui-select-choices repeat="service in data.base_services | filter: $select.search">
        <span ng-bind-html="service.name | highlight: $select.search"></span>

        <!-- HERE NOT -->
        <a href="" class="pull-right" ng-click="setnewservice()">
            <i class="glyphicon glyphicon-plus-sign"></i>
        </a>    
        <!-- ### -->

    </ui-select-choices>
</ui-select>                            


<!-- here obviously works -->
<a href="" class="pull-right" ng-click="setnewservice()">
    <i class="glyphicon glyphicon-plus-sign"></i>
</a>

I can send some parameter to the function and handle this case even selecting the clicked link of that item index so the model with take the correct value, or like in the above working sample take it outside...

but how can I properly handle this, stop the event, select the option without sending the object or some of its attributes, and then do the rest?

$scope.setnewservice = function ($event) {
    $event.stopPropagation();
    // ??
}

I have a similar setup, putting the ng-click as an attribute of us-select-choices both selects the item and calls the method — Samantha Catania, Sep 03 '15 at 12:20

score 7 · Accepted Answer · answered May 09 '16 at 04:41

7

Use ng-change on the ui-select not ng-click on the ui-select-choices. Change this:

ng-click="setnewservice()

to:

ui-select ng-model="datactrl.newservice.selected" theme="selectize" ng-disabled="disabled" style="width: 100%;" ng-change="setnewservice()>

answered May 09 '16 at 04:41

Fergus

2,821
2
27
41

I would recommend using on-select vs ng-change especially if you have a typeahead otherwise it will fire on each character typed into select box. – dwp4ge Dec 03 '17 at 05:59
1

Sure, if you want to use JavaScript when some text has been selected. But that wasn't what @daniel asked. The ngChange directive is more relevant. The expression is evaluated immediately, unlike the JavaScript event which only triggers at the end of a change. This is needed for ui-select-choices to work. http://embed.plnkr.co/Ufhb0IfzrTlG3XLY2ahh/ – Fergus Dec 03 '17 at 20:53

dwp4ge · Answer 2 · 2017-12-03T05:58:29.233

0

You can add the on-select attribute to your tag like so:

on-select="setnewservice($item, $model)"

edited Dec 03 '17 at 05:58

answered Jun 21 '16 at 13:28

dwp4ge

1,963
22
27

Angularjs: Ui-select ng-click in ui-select-choices

2 Answers2