Smart-Table - 选择显示的第一行（angularjs）答案

【问题标题】：Smart-Table - Select first row displayed (angularjs)Smart-Table - 选择显示的第一行（angularjs）
【发布时间】：2015-03-22 10:59:56
【问题描述】：

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

如果有任何帮助，我将不胜感激。

谢谢

【问题讨论】：

请提供您的代码。

标签： smart-table

【解决方案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">

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

【讨论】：

你检查我的答案了吗？有帮助吗？

【解决方案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;
}

【讨论】：