ordBy의 ng-show의 초기 상태를 각도로 설정합니다.

Question

정렬 할 수있는 목록에 대해 표시하고있는 화살표의 초기 상태를 설정하려고합니다. 세 개의 열이 있으며 각 열에는 ng-click에 연결된 링크가 있습니다.이 링크를 클릭하면 목록이 정렬됩니다.

필요에 따라 작동하지만 클릭 할 때까지 위아래 화살표의 상태가 표시되지 않습니다. 그리고 하나를 클릭하면 다른 하나가 사라집니다. 내가 원하는 것은 사용자가 클릭하기 전에 항상 모든 화살표를 표시하고 각 화살표가 세 가지 중 하나를 클릭 할 때 방향을 변경하는 것입니다.

<a href="javascript:void(0)" ng-click="orderByField='dateAdded'; reverseSort = !reverseSort" class="ghostButtonSort dateLabel flrt">Date Received 
    <span ng-show="orderByField == 'dateAdded'"> 
     <span ng-show="!reverseSort">^</span> 
     <span ng-show="reverseSort">v</span> 
    </span> 
</a> 

그리고 지금 난 그냥 기본 범위의 설정이 있습니다 :

기본 링크는 이것이다

$scope.orderByField = 'conditionId'; 

Answer 1

컨트롤러의 기본값으로 값을 초기화하십시오.

당신이 열 머리글을 클릭하여 정렬 열을 변경하고 옆에 나타나는 캐럿을 클릭하여 정렬 방향을 변경할 수 있습니다이 데모에서 http://jsfiddle.net/kxotrmj6/2/

:

$scope.orderByField = 'dateAdded'; 
$scope.reverseSort = false; 

여기에 작업 정렬 동작을 보여 간단한 바이올린의 활성 정렬 열. 이 달성됩니다 : 나는 캐럿에 대한 FontAwesome 사용하고

HTML

<table id='peopleTable'> 
    <thead> 
     <th> 
      <a href="#" ng-click="sortOn = 'firstName'">First Name</a> 
      <i class="fa" 
      ng-click="sortReverse = !sortReverse" 
      ng-show="sortOn == 'firstName'" 
      ng-class="sortReverse ? 'fa-caret-down' : 'fa-caret-up'"> 
      </i> 
     </th> 
     <!-- snip --> 
    </thead> 
    <tbody> 
     <tr ng-repeat='person in people | orderBy:sortOn:sortReverse'> 
      <td>{{person.firstName}}</td> 
      <td>{{person.lastName}}</td> 
      <td>{{person.favoriteColor}}</td> 
     </tr> 
    </tbody> 
</table> 

컨트롤러

function MyCtrl($scope) { 
    $scope.sortOn = 'lastName'; 
    $scope.sortReverse = false; 

    $scope.people = [ 
     { 
      firstName: 'Joe', 
      lastName: 'Smith', 
      favoriteColor: 'Orange' 
     }, { 
      firstName: 'Jane', 
      lastName: 'Doe', 
      favoriteColor: 'Gray' 
     }, { 
      firstName: 'Zoey', 
      lastName: 'Tester', 
      favoriteColor: 'Blue' 
     }]; 
} 

,하지만 당신은 텍스트 또는 이미지를 사용할 수 있습니다. sortReverse 및 sortOn은 모두 컨트롤러에서 초기화되므로 기본값이 있으며 항상 UI에 반영됩니다.

Answer 2

같이 NG-초기화를 사용하면 기본 값을 추가를

아래

<a href="javascript:void(0)" ng-click="orderByField='dateAdded'; reverseSort = !reverseSort" class="ghostButtonSort dateLabel flrt">Date Received 
<span ng-show="orderByField == 'dateAdded'"><span ng-show="!reverseSort" ng-init="reverseSort = true">^</span> 
<span ng-show="reverseSort">v</span></span></a> 

Answer 3

<td> 
    <a href="#" ng-click="sortType = 'firstName'; sortReverse = !sortReverse"> 
     firstName : 
     <span ng-show="sortType == 'firstName' && !sortReverse" class="fa fa-caret-down"></span> 
     <span ng-show="sortType == 'firstName' && sortReverse" class="fa fa-caret-up"></span> 
    </a> 
</td>