ngClick not triggering in Chrome, FF & IE are fine!!!

[aozora]

Hi,

suddenly a strange issue occured: I have the following controller:

JS:

function MyController($scope, $http) {

   $scope.challenges = []; // this are loaded via $http

   $scope.selectChallenge = function (challenge) {

      if (challenge === null) {

         $scope.selectedChallengeId = null;

         return;

      }

      $scope.selectedChallengeId = challenge.Id;

   }

   // load the items

      $http({

         url: 'Manager/Find/?t=' + new Date().getTime(),

         method: "GET",

         params: {

            challengeid: $scope.selectedChallengeId

         }

      })

      .success(function (data) {

         $scope.challenges = data.challenges;

      });

}

HTML:

                     <select class="input-medium">

                        <option data-ng-click="selectChallenge(null)">-select challenge-</option>

                        <option data-ng-repeat="challenge in challenges" 

                                data-ng-selected="challenge.Id == selectedChallengeId"

                                data-ng-click="selectChallenge(challenge)">{{challenge.Name}}</option>

                     </select>

ISSUE: in FF & IE the code is working as excpeted, when clicking on one option of the select, the selectChallenge function fires. BUT in Chrome (the latest, v25) nothing happens, the function is NOT triggered!

Please help me, this issue is very urgent for an app almost ready to deploy in production!

Thanks

Marcello

[Chan Leung]

Hi,

I'm not sure why you have data-ng-click but from what I know all you need is ng-click.

http://jsfiddle.net/iknowu2/R6RZp/1/

Here is a jsfiddle of selected option. Not sure why angular is not firing in the fiddle.

Hope it helps.

Chan

[aozora]

Thanks Chan.

data-ng-click is the same as ng-click, angular interpret also attributes with the data prefix for HTML5 compatibility.

however your fiddle don't work well, with Chrome the dropdown show only 1 option element and display {{challenge.name}}.

With firefox the behaviour is similar, 1 option element, but the dropdown open.

[Clint Checketts]

I suspect you are going to want to us ng-change instead. Since you are truly just trying to detect the select element value change.

Here are 2 examples

http://plnkr.co/edit/BG77QSms2cCzanKtkgPd?p=preview

I'd recommend going the whole ng-options route since you get the benefit of getting the whole object when it is selected.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[aozora]

Hi Clint,

thanks for the reply. Using ng-change & ng-options seems to work also in Chrome. Once filled the select show an empty option, when no entity is selected. I'd like to show, instead an empty option, an option with the text "--- select a challenge ---". You know if there's a way?

[aozora]

Just found on the documentation that if I add an option with value equal to empty string it will be associated to the null model:

<select data-ng-model="selectedChallenge" 

        data-ng-change="selectChallenge()"

        data-ng-options="value.Name for value in challenges"

        class="input-medium">

   <option value="">-select challenge-</option>

</select>