Question

我在桌子上有一个嵌套的ng-repeat。它是一个手风琴表，每个父行都有子行。为了实现这一点，我为每个父项创建了一个<tbody>，将父行放在<tr>中，然后使用ng-repeat添加所有子行。由于多个<tbody>元素，桌面上的斑马条纹被抛弃了。另一个问题是表格能够折叠/展开子行，我需要条纹对于哪个行可见是正确的。所以我试图手动添加条带类。我正在使用Angular的ng-init来切换范围变量，然后使用ng-class来应用它。问题是它似乎与变量的最终状态绑定，而不是迭代器渲染行时的状态。

HTML：

    <tbody ng-repeat="parentRow in myData" ng-init="changeRowClass($even)">
        <tr ng-class="{'industry-payments-even-row':industryRowEven,'industry-payments-odd-row':!industryRowEven}">
            <td>{{parentRow.industryCode}} - {{parentRow.industryCodeDescription}}</td>
            <td class="numeric">{{parentRow.ValueOneSum}}</td>
            <td class="numeric">{{parentRow.ValueTwoSum}}</td>
        </tr>
        <tr ng-repeat="childRow in parentRow.childIndustries" ng-init="changeRowClass($even)" ng-class="{'industry-payments-even-row':industryRowEven,'industry-payments-odd-row':!industryRowEven}">
            <td>{{childRow.industryCode}} - {{childRow.industryCodeDescription}}</td>
            <td class="numeric">{{childRow.ValueOne}}</td>
            <td class="numeric">{{childRow.ValueTwo}}</td>
        </tr>
    </tbody>

控制器代码：

$scope.industryRowEven = false;
$scope.changeRowClass = function(isEven) {
    $scope.industryRowEven = isEven;
};

我需要每次迭代（父OR子）来反转下一个的类（我要忽略孩子现在是否可见的问题，以保持这个更简单）。我可以在调试器中看到变量在每次迭代时都正确切换。问题是ng-class似乎绑定到范围内的当前状态，因此当它为true时它将应用一个类，但是下次它是false并且为所有这些类切换类。

我需要它只是在呈现该行时根据变量状态打印该类，然后忽略该变量，除非重新启动ng-repeat（如排序或切换可见性等）

有没有办法停止绑定？

Answer 1

AngularJS使用名为ngClassOdd和ngClassEven的指令构建此内容。

它们的工作方式与ngClass类似，但仅适用于ngRepeat中的奇数/偶数项。

使用范围var而不绑定

1 个答案: