Плагин AngularJS Smart Table выдает ошибку при попытке установить выбранную по умолчанию строку

0

Я использую Smart-Table с выбором по умолчанию, используя следующую вспомогательную директиву для выполнения выбора, выделение выделенной строки и обратного вызова:

.directive('stSelectRowCustom', function () {
    return {
      restrict: 'A',
      require: '^stTable',
      scope: {
          row: '=stSelectRowCustom',
          callback: '&stSelected' // ADDED THIS
      },
      link: function (scope, element, attr, ctrl) {
        var mode = attr.stSelectMode || 'single';
        element.bind('click', function ($event) {
          scope.$apply(function () {
              ctrl.select(scope.row, mode, $event.shiftKey);
              scope.callback(); // AND THIS
          });
        });

        scope.$watch('row.isSelected', function (newValue) {
            if (newValue === true) {
              element.addClass('st-selected');
            } else {
              element.removeClass('st-selected');
            }
        });
      }
    };
  });

Я использую его следующим образом:

<table st-table="displayedRowCollection" st-safe-src="rowCollection" class="table table-striped" >
        <thead>
          <tr>
              <th>first name</th>
              <th>last name</th>
              <th>birth date</th>
            <th>balance</th>
            <th>email</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in rowCollection" st-select-row-custom="row" st-select-mode="single">
            <td>{{row.firstName}}</td>
            <td>{{row.lastName}}</td>
            <td>{{row.birthDate | date:'shortDate'}}</td>
            <td>{{row.balance}}</td>
            <td>{{row.email}}</td>
        </tr>
        </tbody>
    </table>

Мне нужен st-safe-src потому что я использую фильтр, а rowCollection изменения rowCollection динамически.

Код контроллера:

controller('mainCtrl', ['$scope',
        function ($scope) {
          $scope.rowCollection = [
              {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: '[email protected]'},
              {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: '[email protected]'},
              {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: '[email protected]'}
          ];

          $scope.rowCollection[0].isSelected = true;
        }
    ])

Как вы можете видеть выше, я выбираю первую строку: $scope.rowCollection[0].isSelected = true; и он действительно показан выбранным в таблице, но когда я нажимаю другую строку, первая строка остается выбранной до тех пор, пока я не нажму на нее. Когда я выбираю другую строку (теперь выбираются две строки), а затем выбираем первую, обе они не выбраны. В противном случае директива работает так, как ожидалось.

Там plunkr с рабочим примером: http://plnkr.co/edit/N9jw6B?p=preview

Заранее спасибо.

Обновление 1: Глядя на исходном коде здесь я могу видеть, что смарт-таблица отслеживания last-selected строки и снимите выделение его на следующем отборе, поэтому, когда я прохожу массивы с предварительно выбранными строками, lastSelected не определен, и он не может быть невыбранным, По крайней мере, я знаю причину такого поведения, прямо сейчас пытаюсь создать пользовательскую директиву, которая будет проходить по умолчанию, которая должна быть выбрана, любая помощь будет оценена.

      if (lastSelected) {
        lastSelected.isSelected = false;
      }
      lastSelected = row.isSelected === true ? row : undefined;

Обновление 2: Хорошо, я нашел решение здесь: qaru.site/questions/5282462/... Он работает, но мне не очень нравится, потому что рассматриваю его как взломать. Все еще работает над более подходящим решением, основанным на директиве, к которой я передам строку, которую следует выбрать по умолчанию.

Теги:
angularjs-directive
smart-table

1 ответ

1
Лучший ответ

Утиная резиновая отладка :)

Вот мое решение этой проблемы:

.directive('stDefaultValue', function () {
    return {
      restrict: 'A',
      require: '^stTable',
      scope: {
          selectedRow: '=stDefaultValue',
          stSafeSrc: '='
      },
      link: function (scope, element, attr, ctrl) {
          scope.$watch('stSafeSrc', function(newValue, oldValue) {
              if(typeof newValue !== 'undefined'){
                  ctrl.select(newValue[scope.selectedRow], 'single', false);
              }

          });
      }
    };
  });

Вы должны использовать его следующим образом:

<table st-table="displayedRowCollection" 
          st-default-value="1"
          st-safe-src="rowCollection"
        class="table table-striped" >

В этом примере я передаю только индекс строки, который я хочу выбрать, в моем сценарии этого было достаточно, но, конечно, вы можете передать любой объект javascript и с небольшим усилием сделать его выбранным.

Здесь вы можете увидеть рабочий пример: https://plnkr.co/edit/ca7xLv?p=preview

Ещё вопросы

Сообщество Overcoder
Наверх
Меню