AngularJS 插件智能 Table 尝试设置默认选定行时出现问题

Question

我使用带有默认 selection 的 Smart-Table 通过使用以下辅助指令来执行 selection，突出显示 selected 行和回调：

.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('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;
        }
    ])

正如你从上面看到的，我 select 第一行是：$scope.rowCollection[0].isSelected = true; 它确实显示 selected 在 table 中，但是当我点击另一行时, 第一行保持 selected 直到我点击它。当我 select 另一行（现在两行是 selected）然后 select 第一行时，两行都是未selected。否则指令按预期工作。

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

提前谢谢你。

更新 1：通过查看源代码 here 我可以看到 smart-table 跟踪 last-selected 行并在下一个 selection 上取消 selecting 它，所以当我传递带有 PRE-selected 行的数组，lastSelected 未定义，不能取消 selected。至少我知道这种行为的原因，现在正在尝试构建一个自定义指令，它将传递应该 selected 的默认行，感谢任何帮助。

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

更新 2：好的，我在这里找到了解决方案：它有效，但我不太喜欢，因为将其视为 hack。仍在为更多 suitable 解决方案工作，该解决方案基于一个指令，我将向该指令传递行，默认情况下应为 selected。

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

AngularJS 插件智能 Table 尝试设置默认选定行时出现问题

AngularJS plugin Smart Table issue when trying set default selected row

angularjs

angularjs-directive

smart-table