Question

我可以选择多行，但我希望能够在同一页面上的不同表中选择这些数据。目前，当我在第一个表中选择一行时，它也会在第二个表中选择它，但我希望它们是独立的。有人有想法吗？

以下是我的HTML代码

<div class="row" ng-show="{{ adultNumber }}">
    <div class="col-md-8">
        <h1>Adult 1</h1>
        <table class="table table-bordered">
            <tr ng-repeat="extra in extras" ng-class="{'selected': extra.selected}" ng-click="select(extra)" ng-model="radioExtrasAdult1">
                <td ng-bind="extra.name"></td>
                <td ng-bind="extra.price"></td>
            </tr>
        </table>
    </div>
</div>
<div class="row" ng-show="{{ adultNumber >= 2 }}">
    <div class="col-md-8">
        <h1>Adult 2</h1>
        <table class="table table-bordered">
            <tr ng-repeat="extra in extras" ng-class="{'selected': extra.selected}" ng-click="select(extra)" ng-model="radioExtrasAdult2">
                <td ng-bind="extra.name"></td>
                <td ng-bind="extra.price"></td>
            </tr>
        </table>
    </div>
</div>

角度js

$http.get('json/extras.json')
    .then(function(res){
        $scope.extras = res.data;                
    });

$scope.select = function(item) {
    item.selected ? item.selected = false : item.selected = true;
}

$scope.submit = function(x) {
    var x = $filter("filter")($scope.extras, {
        selected: true
    }, true);
    console.log(x);
}

谢谢。

Answer 1

问题是，当您在表中选择一个对象时，您可以修改其属性以告诉它已被选中。鉴于您在另一个表中使用相同的对象，它也会更新，因此也会被选中。

你可以做些不同的事情，

对您显示的对象进行深层复制，以便每个表显示一个副本，这样就不会同时修改这两个内容。为此，请使用 angular.copy 。
执行选择时修改同一对象的不同属性。例如，您可以对第一个表使用 item.selected [0] ，对第二个表使用 item.selected [1] 。此解决方案的优点是所有数据都集中在同一对象中。但是，您必须将一个aditional参数传递给您的select函数，以告知您选择的是哪个表（ 0 或 1 ）

希望它有所帮助！

如何在角度js表中启用多行选择

1 个答案: