smart-table - Smart-Table - 选择显示的第一行（angularjs）

Question

使用智能表时是否可以自动选择第一行。我已经使用 ng-class 有条件地添加了 st-selected 类，它突出显示了该行，但是当我选择另一行时，它不会取消选择第一行。

我将不胜感激。

谢谢

Answer 1

我刚刚遇到了类似的问题，但想要有一个指定的默认选择，我通过发誓和指令解决了这个问题。

(function(undefined) {
'use strict';

angular
    .module('mymodule')
    .directive('stDefaultSelection', function() {
    return {
        require: 'stTable',
        restrict: 'A',
        scope: {
            selection: '=stDefaultSelection',
        },
        link: function link(scope, element, attrs, controller) {
            scope.$watch('selection', function(newValue, oldValue) {
                var selectionMode = 'single';
                if (angular.isArray(newValue) && newValue.length > 1) {
                    selectionMode = 'multi';
                }
                if (angular.isArray(newValue)) {
                    newValue.forEach(function (row, index, array) {
                        controller.select(row, selectionMode);
                    });
                } else {
                    controller.select(newValue, selectionMode);
                }
            });
        }
    };
});
})();

然后在你的html中：

<table st-table="myCtrl.data.records" st-safe-src="myCtrl.data.safeRecords" st-default-selection="myCtrl.defaultRecord">

设置数据后，设置您的默认记录，这可能会解决您的问题。

Answer 2

您可以使用 $watch 运算符和 $filter 运算符来完成必要的工作。

//fired when table rows are selected
$scope.$watch('displayedCollection', function (row) {
     //get selected row
     row.filter(function (r) {
         if (r.isSelected) {
             $scope.selectedId = r.id;
             //getInfo(r.id);
         }
         else if (!$scope.rowCollection[0].isSelected) {
             $scope.rowCollection[0].isSelected = true;
             $scope.selectedId = $scope.rowCollection[0].id;
             //getInfo($scope.rowCollection[0].id);
         }
      })
}, true);

这将选择选定的行，如果没有选择任何行，则默认选择索引为 0 的行。（第一行）

您需要将属性传递给您的智能表：

<tr ng-repeat="row in rowCollection" st-select-row="row" st-select-mode="single">

您可以创建一个 CSS 类来突出显示该行：

.st-selected {
background-color: #ffd800;
}