2016-09-05 1 views
0

주문 목록을 정렬하는 방법을 변경하려면 select option 요소가 있습니다. 때마다 나는 다른 옵션은이 $scope 내가 목록Angular JS - 선택 옵션에서 클릭이 작동하지 않습니다. [Chrome]

$scope.sortType = ['-grade','-year']; 
에게 주문 기준을 나타 내기 위해 사용 변경하는 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> 

을 발사 선택

문제는 파이어 폭스에서이 동안 ​​완벽하게 작동한다는 것입니다 , 크롬에서는 ng-click이 실행되지 않습니다.

이 질문은 is similar to this one이지만 내 경우에는 ng-options을 사용할 수 없습니다. 이 버그는 in this thread에도 설명되어 있지만 Chrome에서 이미 해결 된 것으로 표시된 버그와 연결됩니다.

크롬에서이 작업을 수행하는 다른 방법은 환영합니다. 당신은 check the Plunkr here 일 수 있습니다.

+1

에 ngChange https://docs.angularjs.org/api/ng/directive/select'ngChange' (선택 사항) 문자열 \t 각도 표현을 시도 select 요소와의 사용자 상호 작용으로 인해 선택한 옵션이 변경 될 때 실행됩니다. '' – Gary

답변

1

ng-modelvalue을 조합하여 사용할 수 있습니다. 이 경우 변경시 값은 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

관련 문제