Question

我能够对表头的click事件对表数据进行排序。但无法相应地看到上/下图标。我从这里选择了这段代码。plnkr 当我在plnkr中执行此代码时，这是正常的，因为它不起作用在我的浏览器中。我在Firefox和Chrome中检查过这个。请告诉我我在哪里做错了。这是代码..

HTML

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
  <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as ctrl">
  Predicate: {{ctrl.predicate}}
  <table border="1">
    <thead>
      <tr>
        <th ng-repeat="key in getKeysOfCollection(colors[0])" ng-click="ctrl.predicate = key; ctrl.reverse=!ctrl.reverse;">
          {{key}}
          <!--<span class="fa fa-sort columnSortIcons" ng-if="ctrl.reverse && key == ctrl.predicate"></span>-->
          <span class="fa fa-sort-down columnSortIcons" ng-if="!(ctrl.reverse) && key == ctrl.predicate"></span>
          <span class="fa fa-sort-up columnSortIcons" ng-if="ctrl.reverse && key == ctrl.predicate"></span>
        </th>
      </tr>
      <tr>
        <th ng-repeat="key in getKeysOfCollection(colors[0])">
          <input type="text" ng-model="search[key]" />
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in colors | filter:search | orderBy:ctrl.predicate:ctrl.reverse">
        <td ng-repeat="key in getKeysOfCollection(item)">{{item[key]}}</td>
      </tr>

    </tbody>
  </table>
</body>
</html>

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  this.predicate='id';
  this.reverse=false;

  $scope.search = {};

  $scope.colors = [{
    'id': 1,
    'productId': 1001,
    'productName': 'arun',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-01T06:41:30.809Z'
  }, {
    'id': 2,
    'productId': 1002,
    'productName': 'kumar',
    'minimumLevel': 23,
    'price': 12.54,
    'productDate': '2014-11-02T06:41:30.809Z'
  }, {
    'id': 3,
    'productId': 1003,
    'productName': 'banu',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-04T06:41:30.809Z'
  }, {
    'id': 4,
    'productId': 1004,
    'productName': 'ravi',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-22T06:41:30.809Z'
  }, {
    'id': 5,
    'productId': 1005,
    'productName': 'sri',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-18T06:41:30.809Z'
  }];

  $scope.getKeysOfCollection = function(obj) {
    obj = angular.copy(obj);
    if (!obj) {
      return [];
    }
    return Object.keys(obj);
  }
});

结果：我的结果如下所示..点击标题时不显示/关闭图标。

Answer 1

我建议您使用ng-show代替ng-if

 <span class="fa fa-sort-down columnSortIcons" ng-show="!(ctrl.reverse) && key == ctrl.predicate"></span>
          <span class="fa fa-sort-up columnSortIcons" ng-show="ctrl.reverse && key == ctrl.predicate"></span>

Answer 2

通过更改以下行解决了问题。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />

与

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />

有意义的是，即使url找到font-awesome.css，但对于href，还需要告诉protocol（http）从web找到css文件。

使用ng-repeat在angularJs中看不到排序/缩小图标

2 个答案: