CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsforms
SpaceNinjaApe
SpaceNinjaApe

Reputation: 312

Function gets called twice with one click

I want to save a boolean value into my scope but in the form it should be displayed with either "active" or "inactive". So instead of saving it directly to the $scope I made a function which saves the boolean based on the selected item.

HTML

<ui-select ng-model="statusTemp" id="sStatusAnz" name="sStatusAnz"> 
  <ui-select-match placeholder="{{'selectStatus' | translate}}" id="customerNewDropdownStatus">
    {{$select.selected | translate}} 
  </ui-select-match> 
  <ui-select-choices repeat="s in status" ng-click="setStatus($select.selected)">
    {{s}} 
  </ui-select-choices> 
</ui-select>

Js

 $scope.editCustomer = { };   
 $scope.status = ['active', 'inactive'];
 $scope.setStatus = function(selected){
    console.log("setStatus(",selected,")");
    if( selected == "active" ){

        $scope.editCustomer.status = true;
    }else{
        $scope.editCustomer.status = false;
    }
}

The function userInputDetected() can be ignored since it does nothing at the moment. There is no watch element or something like this. Still the console logs this when i try to select one option :

setStatus( true )
setStatus( active )

or

setStatus( false )
setStatus( inactive )

Since the project uses uglify and puts everything in one JS its hard to debug. Does anybody has the same problem or know whats going on? Thanks in advance!

Upvotes: 0

Views: 113

Answers (2)

Ovidiu Dolha
Ovidiu Dolha

Reputation: 5413

It could be related to the fact that ng-click is assigned directly to the elements, and they might overlap since they could be virtual/ non-standard elements (and depends if angular-bootstrap uses replace: true or not for these).

Safest approach is to have your own element, e.g a span, and assign the ng-click to it:

<ui-select-choices repeat="s in status">
  <span ng-click="setStatus($select.selected)">{{s}} </span>
</ui-select-choices>

Upvotes: 0

Ernestas Romeika
Ernestas Romeika

Reputation: 171

I assume it's happening because you bind your event to ng-click, and to select an option from a dropdropdown, you always have to perform two clicks. Since you're using angular-ui, you should use "on-select" directive in your ui-select.

Usage:

<ui-select ng-model="editCustomer.status" on-select="someFunction($item, $model)">

From documentation:

Occurs when an item was selected

Upvotes: 2

Related Questions