在 Angular 中为 orderBy 设置 ng-show 的初始状态

Question

正在尝试设置我为可排序列表显示的箭头的初始状态。共有三列，每一列都有一个 link 绑定到一个 ng-click，单击后将对列表进行排序。

它正在按我的需要工作，但向上和向下箭头的状态在单击之前不会显示。当我点击一个时，另一个消失了。我想要的是所有箭头甚至在用户点击之前始终显示，并且每个箭头都在点击三个箭头中的任何一个时改变方向。

基本的link是这样的：

<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

使用 ng-init 添加默认值，如下所示

<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 2

使用控制器中的默认值初始化值：

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

这里有一个简单的 Fiddle 演示了有效的排序行为：http://jsfiddle.net/kxotrmj6/2/

在此演示中，您可以通过单击列标题更改排序列，并通过单击活动排序列旁边显示的插入符号更改排序方向。这是通过以下方式实现的：

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'
        }];
}

我使用 FontAwesome 作为插入符号，但您可以使用文本或图像。 sortReverse 和 sortOn 都在控制器中初始化，因此它们具有默认值，并且将始终反映在 UI.

中

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>

在 Angular 中为 orderBy 设置 ng-show 的初始状态

Set initial state of ng-show for orderBy in Angular

angularjs

angularjs-orderby

angularjs-ng-click