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;
}

智能表 - 选择显示的第一行（angularjs）

2 个答案: