Question

我有一个带有可折叠行的表的指令，只允许在这样的时间打开一行：

HTML：

<div class="my-table">
    <div class="table-header">
        ... table headers ...
    </div>
    <my-table-row ng-repeat="itm in itms" itm="itm"></my-table-row>
</div>

JS指令：

app.directive('myTable', function() {
return {
    restrict: 'E',
    scope: { 
        itms: '='
    },
    controller: 'TableController',
    templateUrl: '/views/directives/my-table.html'
};
});

JS控制器：

app.controller('TableController', ['$scope', function($scope) {
$scope.rows = [];

$scope.toggleRow = function(row) {
    row.open = !row.open;
};

this.addRow = function addRow(row) {
    $scope.rows.push(row);
};

this.toggleOpen = function toggleOpen(selectedRow) {
    angular.forEach($scope.rows, function(row) {
        if (row === selectedRow) {
            $scope.toggleRow(selectedRow);
        } else {
            row.open = false;
        }
    });
};
}]);

和这样的行：

HTML：

<div class="table-row" ng-class="{ 'open': open }" ng-click="toggleOpen(this)">
    ... row contents code ...
</div>

JS指令：

app.directive('myTableRow', function() {
return {
    require: '^myTable',
    restrict: 'E',
    scope: { 
        itm: '='
    },
    link: function(scope, element, attrs, tableCtrl) {
        scope.open = false;
        scope.toggleOpen = tableCtrl.toggleOpen;
        tableCtrl.addRow(scope);
    },
    templateUrl: '/views/directives/my-table-row.html'
};
});

在模板中使用如下：

<my-table itms="itms"></my-table>

这一切都有效，但我有一个CSS伪元素来围绕最后一行的角落，如：

.table .table-row:last-child {
    border-radius: 0 0 4px 4px;
}

然而，ng-repeat正在我的表行周围包裹一个标签，这导致伪选择器将它们全部视为最后一个子节点。我尝试过重组，尝试使用$ last并为最后一行创建一个实际的类，移动事物，但我没有想法。有什么想法吗？

Answer 1

据我所知，css class table-row 位于 myTableRow 指令中，该指令没有replace: true属性。这意味着 table-row css类由 my-table-row 指令属性包装，因此，为了到达最后一行，您的CSS规则应为：

.table my-table-row:last-child .table-row {
  border-radius: 0 0 4px 4px;
}

麻烦使用伪选择器和ng-repeat内的指令

1 个答案: