2016-05-30 9 views
0

複数の行を選択できますが、同じページの異なるテーブルでそれらのデータを選択できます。現時点では、最初のテーブルで行を選択すると、2番目のテーブルでも行が選択されますが、それらを独立させたいと思います。誰でもアイデアがありますか?角度jsテーブルで複数の行選択を有効にする方法

は、以下の角度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); 
} 

ありがとうござい以下の私の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> 

です。

+0

adultNumberとextrasの関係は何ですか? –

+0

@lukaZawiはいそれは大丈夫です、それは目的上です。アダルトナンバーは、コントローラ内で条件を作るために扱うデータです。それは私の問題と関連していない、と私は思う。 – maevy

答えて

0

テーブルのオブジェクトを選択すると、その属性が変更されて選択されたことが示されます。他の表で同じオブジェクトを使用しているという事実を考えると、それも更新されているので、選択されています。あなたはそれについて行うことができますさまざまなものがあります

  1. は、テーブルごとに一つのコピーを表示しますので、同時に2つのコンテンツを変更しないように、表示するオブジェクトのディープコピーを作成します。このためには、のangular.copyを使用してください。

  2. 選択を実行するときに同じオブジェクトの異なる属性を変更します。たとえば、最初のテーブルにはitem.selected [0]を使用し、2番目のテーブルにはitem.selected [1]を使用できます。このソリューションの利点は、すべてのデータが同じオブジェクトに集中することです。それでも、あなたはどのテーブルにあなたが選択している伝えるために、あなたの選択機能にaditionalパラメータを渡す必要があり(または)

それは助けを願って!

関連する問題