Как включить множественный выбор строк в угловой таблице js

0

Я могу выбрать несколько строк, но я хотел бы иметь возможность выбирать эти данные в разных таблицах на одной странице. В настоящий момент, когда я выбираю строку в первой таблице, она также выбирает ее во второй таблице, но я бы хотел, чтобы они были независимыми. У кого-то есть идея?

Ниже мой 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);
}

Спасибо.

  • 0
    Какая связь между adultNumber и статистами?
  • 0
    Это нормально, что вы показываете обе таблицы одновременно, или должно быть ng-show=" adultNumber == 1" для Adult 1?
Показать ещё 4 комментария
Теги:

1 ответ

0

Дело в том, что когда вы выбираете объект в таблице, вы изменяете его атрибут, чтобы сообщить ему, что он выбран. Учитывая тот факт, что вы используете один и тот же объект в другой таблице, он также обновляется, поэтому он также выбран.

Есть разные вещи, которые вы можете сделать по этому поводу,

  1. Сделайте глубокую копию отображаемых объектов, чтобы вы отображали одну копию на таблицу, и поэтому вы не изменяете оба содержимого одновременно. Для этого используйте угловую.копию.

  2. При выполнении выбора измените разные атрибуты на одном и том же объекте. Например, вы можете использовать item.selected [0] для первой таблицы и item.selected [1] для второго. Преимущество этого решения состоит в том, что все данные централизованы в одном и том же объекте. Тем не менее, вам нужно передать дополнительный параметр в функцию выбора, чтобы указать, в какой таблице вы выбираете (0 или 1)

Надеюсь, это помогло!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню