Question

我正在使用具有默认选择的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会动态更改。

Controller的代码如下：

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

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

从上面我可以看到，我选择了第一行：$scope.rowCollection[0].isSelected = true;并确实在表格中显示了选中，但是当我点击另一行时，第一行保持选中状态，直到我点击它为止。当我选择另一行（现在选择了两行）然后选择第一行时，两者都是未选中的。否则指令按预期工作。

有一个带有工作示例的傻瓜：http://plnkr.co/edit/N9jw6B?p=preview

提前谢谢。

更新1 ：从查看源代码here我可以看到智能表跟踪last-selected行并在下一个选择中取消选择它，所以当我传递带有PRE选定行的数组时，lastSelected未定义它不能被取消选择。至少我知道这种行为的原因，现在正在尝试构建一个自定义指令，该指令将传递应该被选中的默认行，任何帮助都会受到赞赏。

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

更新2 ：好的，我在这里找到了解决方案：https://stackoverflow.com/a/32633795/947111 它有效，但我不喜欢因为它被认为是黑客。仍在使用基于我将传递行的指令的更合适的解决方案，默认情况下应该选择该行。

Answer 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

尝试设置默认选定行

1 个答案: