Question

我有一个select option元素，以便更改排序有序列表的方式。每次我选择不同的选项时，它都会触发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>

这会更改我用来指示订购列表的条件的$scope

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

问题在于，虽然在Firefox中这是完美的，但在Chrome中ng-click只是不会触发。

这个问题is similar to this one，但就我而言，我不能使用ng-options。我们还讨论了这个错误in this thread，但似乎它们将其链接到已在Chrome中标记为已解决的错误。

欢迎任何在Chrome中使用此功能的替代方法。你可以check the Plunkr here。

Answer 1

您可以将ng-model与value结合使用。在这种情况下，在更改时，该值将分配给sortType，它应该适用于所有浏览器（由AngularJS支持），我已经在最新的Chrome和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>

这里也是updated plunker

Angular JS - ng-click无法在选项[Chrome]中使用

1 个答案: