CODEWITHSUNDEEP
angularjsgoogle-chrome
Joe82
Joe82

Reputation: 1251

Angular JS - ng-click not working in select option [Chrome]

I have a select option element in order to change the way to sort an ordered list. Each time I select a different option it fires an ng-click

 <select>
     <option ng-click="sortType = ['-grade','-year']">Grade</a>
     <option ng-click="sortType = ['-year','-grade']">Year</a>
     <option ng-click="sortType = 'student'">Name</a>
</select>
<ul>
     <li ng-repeat="name in names | orderBy:sortType">{{name.student}} from {{name.year}}th year gets a {{name.grade}}</li>
</ul>

That changes the $scope I use to indicate the criteria to order the list

$scope.sortType = ['-grade','-year'];

The problem is that while in Firefox this is working perfectly, in Chrome the ng-click just doesn't fire.

This question is similar to this one, but in my case I cannot use a ng-options. This bug is also discussed in this thread, but it seems that they link it to a bug that is already marked as solved in Chrome.

Any alternative way to make this work in Chrome is welcome. You can check the Plunkr here.

Upvotes: 0

Views: 2655

Answers (1)

G07cha
G07cha

Reputation: 4164

You can use ng-model in combination with value instead. In this case on change, the value will be assigned to sortType and it should work in all browsers(supported by AngularJS), I've tested in latest Chrome and Firefox.

angular.module('app', []).controller('controller', function($scope) {
  $scope.names = [{student: 'John', year: 2015, grade: 'bachelor'}, {student: 'Arnold', year: 2016, grade: 'magister'}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<select ng-model="sortType">
     <option value="['-grade','-year']">Grade</a>
     <option value="sortType = ['-year','-grade']">Year</a>
     <option value="sortType = 'student'">Name</a>
</select>
<ul>
     <li ng-repeat="name in names | orderBy:sortType">{{name.student}} from {{name.year}}th year gets a {{name.grade}}</li>
</ul>
</div>

Here is also updated plunker

Upvotes: 1

Related Questions