2

这是一个显示我正在尝试做的事情的 plunker： http ://plnkr.co/edit/mYFNBC6Z2XdpFD28XLdq?p=preview

我正在定义一个默认排序，并希望能够根据范围变量进行设置，例如：

<th st-sort-default="{{order}}" st-sort="balance">balance</th>

但是，这似乎并没有起作用，我不确定这样做的正确方法。

Stackoverflow 说我需要包含代码，所以这里是 plunker 的 index.html 和 script.js：

angular.module('myApp', ['smart-table']).
controller('mainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  var nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'],
      familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];

  function createRandomItem() {
    var firstName = nameList[Math.floor(Math.random() * 4)],
        lastName = familyName[Math.floor(Math.random() * 4)],
        age = Math.floor(Math.random() * 100),
        email = firstName + lastName + '@whatever.com',
        balance = Math.random() * 3000;

    return {
      firstName: firstName,
      lastName: lastName,
      age: age,
      email: email,
      balance: balance
    };
  }


  $scope.displayed = [];
  for (var j = 0; j < 50; j++) {
    $scope.displayed.push(createRandomItem());
  }

  // Does not work
  $scope.order = "";
  // Works
  //$scope.order = "reverse";
}]);
.st-sort-ascent:before {
  content: '\25B2';
}

.st-sort-descent:before {
  content: '\25BC';
}

.table-container{
  height:500px;
  overflow-y:scroll;
}

.loading-indicator {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  text-align: center;
  padding: 0.7em; }

.loading-indicator:before {
  display: inline-block;
  margin: 0 0.4em;
  min-width: 1em;
  min-height: 1em;
  border-top: 4px solid #646464;
  border-right: 4px solid #e6e6e6;
  border-left: 4px solid #e6e6e6;
  border-bottom: 4px solid #646464;
  content: "";
  -webkit-animation: halfspin 1s ease infinite;
  -moz-animation: halfspin 1s ease infinite;
  -o-animation: halfspin 1s ease infinite;
  animation: halfspin 1s ease infinite;
  border-radius: 100%; }

@-webkit-keyframes halfspin {
  to {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg); } }

@-moz-keyframes halfspin {
  to {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg); } }

@keyframes halfspin {
  to {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg); } }
<!DOCTYPE html>
    <html ng-app="myApp">

    <head>
      <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
      <script data-require="angular.js@1.3.7" data-semver="1.3.7" src="https://code.angularjs.org/1.3.7/angular.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.7/smart-table.min.js"></script>
    </head>
    <body ng-controller="mainCtrl">
      <div class="table-container" st-table="displayed">
        <table class="table table-striped">
          <thead>
            <tr>
              <th st-sort="firstName">first name</th>
              <th st-sort="lastName">last name</th>
              <th st-sort="age">age</th>
              <th st-sort-default="{{order}}" st-sort="balance">balance</th>
              <th>email</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in displayed">
              <td>{{row.firstName | uppercase}}</td>
              <td>{{row.lastName}}</td>
              <td>{{row.age}}</td>
              <td>{{row.balance | currency}}</td>
              <td><a ng-href="mailto:{{row.email}}">email</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div ng-show="isLoading" class="loading-indicator"></div>
    </body>
    </html>

4

1 回答 1

2

中的空字符串st-sort-default将被忽略。从smart-table.debug.js 的第 282 行开始：

if (attr.stSortDefault) {
   sortDefault = scope.$eval(attr.stSortDefault) !== undefined ?    scope.$eval(attr.stSortDefault) : attr.stSortDefault;
}

我建议你使用st-sort-default="default". 但是，任何字符串都会做同样的事情。

第 308 行有一个特定的检查reverse：

if (sortDefault) {
   index = attr.stSortDefault === 'reverse' ? 1 : 0;
   sort();
}

请参阅此处的工作示例：http ://plnkr.co/edit/HAeOqHaiMM9mUQrxa8eS?p=preview

于 2015-04-12T11:02:44.537 回答