Joe82 Joe82 - 3 months ago 91
AngularJS Question

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.

Answer

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

Comments