1

I'm selecting multiple items with ui-select. When I click on one of the selected items I want to open modal window. I implemented it just as the function on ng-click in the ui-select-match element.

<ui-select id="myselect" ng-model="myvar" theme="bootstrap" ng-required="true" multiple="" search-enabled="true" reset-search-input="true">
    <ui-select-match ng-click="myFunction()" placeholder="Click to select">{{$item}}
    </ui-select-match>
    <ui-select-choices repeat="item in ['one', 'two', 'three']">
      <div>{{item}}</div>
    </ui-select-choices>
  </ui-select>

my js looks like that: 

$scope.myFunction = function() {
  $uibModal.open({
   template: "Hi there!" 
  });
}

On click my modal window is opening, but I have the problem: the modal windows opens when I remove the item by clicking on the x icon. How can I prevent this behaviour?

Plunkr is here: http://plnkr.co/edit/i4urNAa1u1rteXhfvAyd?p=preview

ganqqwerty
  • 1,894
  • 2
  • 23
  • 36

1 Answers1

2

try to move ng-click inside ui-select-match:

  <ui-select-match placeholder="Click to select">
    <a ng-click="myFunction()" > {{$item}} </a>
  </ui-select-match>
mhd
  • 446
  • 5
  • 18
  • Indeed it works, but it creates areas where the click does no effect, see forked plunkr: http://plnkr.co/edit/jLMKPzxsy9BnpkM18Blj?p=preview. Is there another way? – ganqqwerty Jun 13 '16 at 18:44
  • the only option i can see: use button instead of anchor and add some css properties to fit all the space. Something like the answers of this question http://stackoverflow.com/questions/26389542/clear-selected-option-in-ui-select-angular – mhd Jun 13 '16 at 18:59