Question

我使用智能表，我需要预先选择一个特定的行。

所以在加载我的列表后，当我到达我想要选择的项目时，我会循环进入它并设置isSelected属性：

// Preselect a row
for (var i = 0, len = scope.displayCollection.length; i < len; i += 1) {
    var person = scope.displayCollection[i];
    if (person.firstName === 'Blandine') {
        person.isSelected = true;
        scope.selected = person;
        break;
    }
}

它工作正常，但是当我想选择另一条线时，预选线不会被取消选择！我必须点击它才能手动取消选择它，然后才能正确选择另一条线。

这是一个解释问题的JSFiddle：http://jsfiddle.net/6pykn5hu/3/

我尝试了Smart-Table - Select first row displayed (angularjs)提出的建议，但没有成功。

由于

Answer 1

所以我查看了他们的directive，因为你可以看到它在父指令stTable中调用了一个函数。 row绑定到点击处理程序...从ctrl.select()调用stTable函数，此函数依次存储最后选择的row。这是你的问题，因为这个事件不会触发，它永远不会设置最后一次单击的行，因此永远不会删除它的类。我为你重写了这个指令，以便它可以用于你想要实现的目标，但它很容易被改进。

app.directive('prSystem', function () {
  return {
    restrict: 'A',
      require: '^stTable',
      scope: {
        row: '=prSystem'
      },
      link: function (scope, element, attr, ctrl) {
          var mode = attr.stSelectMode || 'single';
          if(scope.row.isSelected) {
              scope.row.isSelected = undefined;
              ctrl.select(scope.row, mode);
          }

        element.bind('click', function () {
          scope.$apply(function () {
            ctrl.select(scope.row, mode);
          });
        });

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

Answer 2

最后我找到了解决方案：

不再需要$watch，而是每行ng-click：

<tr st-select-row="row" ng-repeat="row in displayCollection" ng-click="selectRow(row)">

在选择单击的行之前，我手动取消选择所有行：

scope.selectRow = function (row) {
    for (var i = 0, len = scope.displayCollection.length; i < len; i += 1) {
        scope.displayCollection[i].isSelected = false;
    }
    row.isSelected = true;
    scope.selected = row;
}

使用JSFiddle：http://jsfiddle.net/6pykn5hu/6/

如果某人有更好的解决方案，我愿意接受其他建议：）

智能表 - 预选特定行

2 个答案: