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