アダプティブ・ストラップ/角動的テーブル・カラム

Question

アダプト・ストラップ・テーブル・ライトを見ていて、それを使って遊んでいました。ここで私が一緒に遊んでいたJSfiddleがあります：http://jsfiddle.net/cx5gm0sa/ 私は何をしようとしていましたが、それが可能かどうかを動的に隠す/表示することができますか？私が追加したコードは、$ scope.showColumn = true; （あなたはhtmlページでこの値を見ることができますが、一番上に印刷しています）。 任意の行の[購入]ボタンをクリックすると、変数は前とは逆の値に設定され、真と偽の間が交互になります。

$scope.buyCar = function (car) { 
    $scope.showColumn = !$scope.showColumn 
}; 

この変数は、私が期待していたとして、変数が列を非表示にしていない/ショーを変更したときにモデル列のvisibleプロパティのために使用されているもの、しかし、それだけで今まで隠しているようだ/ショーもあります変数がどのような値で初期化されたかによって異なります。とにかく、私は当初期待していたように、この作業を動的にすることはありますか？そして誰もがまだそのように働いていない理由を知っていますか？

私が得る可能性のあるヘルプは事前におねがいします。

Answer 1

OK、テーブルが更新されない理由は、購入ボタンをクリックしたときにテーブルを定義するコードをコントローラが再実行しないためです。これを変更して、コンフィグの配列を$scope.carsTableColumnDefinitionに直接代入するのではなく、代わりに配列を返すgetDefinitionという関数を定義しました。その後、$scope.buyCar = function (car){}では、私は関数を呼び出します。 - それをチェックアウト

$scope.carsTableColumnDefinition = getDefinition(); 
... 
//Then inside the buyCar function I have: 
$scope.buyCar = function (car) { 
    $scope.showColumn = !$scope.showColumn; 
    //now refresh by calling the get-definition function: 
    $scope.carsTableColumnDefinition = getDefinition(); 
}; 
.. 
//Finally, this is my getDefinition function: 
function getDefinition(){ 
    return [ 
     { 
     columnHeaderDisplayName: 'Model', 
     displayProperty: 'name', 
     sortKey: 'name', 
     columnSearchProperty: 'name', 
     visible: $scope.showColumn 
     }, 
     { 
     columnHeaderTemplate: '<span><i class="glyphicon glyphicon-calendar"></i> Model Year</span>', 
     template: '<strong>{{ item.modelYear }}</strong>', 
     sortKey: 'modelYear', 
     width: '12em', 
     columnSearchProperty: 'modelYear' 
     }, 
     { 
     columnHeaderTemplate: '<span><i class="glyphicon glyphicon-usd"></i> Price</span>', 
     displayProperty: 'price', 
     cellFilter: 'currency', 
     sortKey: 'price', 
     width: '9em', 
     columnSearchProperty: 'price' 
     }, 
     { 
     columnHeaderDisplayName: 'Buy', 
     templateUrl: 'src/tablelite/docs/buyCell.html', 
     width: '4em' 
     } 
    ]; 
    } 

私はupdated the jsfiddle：だからここ

は、私が行った変更です。