Умная таблица Angular устанавливает порядок сортировки по умолчанию на основе переменной области видимости

Вот плункер, показывающий, что я пытаюсь сделать: ?p=предварительный просмотр

Я определяю сортировку по умолчанию и хочу установить ее на основе переменной области видимости, например:

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

Однако, похоже, это не срабатывает, и я не уверен, что это правильный способ сделать это.

Stackoverflow говорит, что мне нужно включить код, поэтому вот index.html и script.js из plunker:

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="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
      <script data-require="[email protected]" 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>


javascript angularjs smart-table
person ppearcy    schedule 08.04.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Пустая строка в st-sort-default будет игнорироваться. Из строки 282 в smart-table.debug.js:

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

person pititomore    schedule 12.04.2015