angularjsを使用したhtmlテーブルの列の並べ替え

Question

htmlテーブルに使用可能な列の数が設定されています。ユーザーが必要な列を除外すると、選択した列のみの表が表示されます。 ここでは、表示する列の順序を設定するオプションをユーザーに与えたいと思います。 選択リストの列を並べ替えるためのリストと機能があります。下記のスクリーンショットを確認してください。

実際にはテーブル内の列を同じ順序で並べ替えるにはどうすればいいですか右側のリストで設定します。

これは私がこれまでしているコードです：事前に

     <table class="table table-hover" id="basicTable"> 
          <thead> 
           <tr> 
            <th ng-show="ShowDescription">Description</th> 
            <th ng-show="ShowDeviceId">Device ID</th> 
            <th ng-show="ShowUpdateRequired">Update Required</th> 
            <th ng-show="ShowOpenTime">Open Time</th> 
            <th ng-show="ShowOpenTimeAda">Open Time Ada</th> 
            <th ng-show="ShowKeypadCode">Keypad Code</th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr ng-repeat="(k, v) in assets | filter: appliedFilter"> 
            <td class="v-align-middle" ng-show="ShowDescription"> 
             <p>{{v.description}}</p> 
            </td> 
            <td class="v-align-middle" ng-show="ShowDeviceId"> 
             <p>{{v.extdoorid}}</p> 
            </td> 
            <td class="v-align-middle" ng-show="ShowUpdateRequired"> 
             <p><span ng-if="v.updaterequired == '1'">Yes</span><span ng-if="v.updaterequired == '0'">No</span></p> 
            </td> 
            <td class="v-align-middle" ng-show="ShowOpenTime"> 
             <p>{{v.opentime}}</p> 
            </td> 
            <td class="v-align-middle" ng-show="ShowOpenTimeAda"> 
             <p>{{v.opentimeada}}</p> 
            </td> 
            <td class="v-align-middle" ng-show="ShowKeypadCode"> 
             <p>{{v.keypadcode}}</p> 
            </td> 
           </tr> 
          </tbody> 
         </table> 

おかげで、Laziale

Answer 1

は1つの提案は、現在選択された列の配列を使用して、そしてもちろん、現在の表示資産の配列されました。

ロジックのデモンストレーションのためにsampleを作成しました。

$scope.columns = [ 
    {id: "col1", description: "col 1", show: true}, 
    {id: "col2", description: "col 2", show: true}, 
    {id: "col3", description: "col 3", show: false}, 
    {id: "col4", description: "col 4", show: true} 
]; 

$scope.assets = [ 
    {col1: "Some value 1", col2: "Another value 1", col3: "Col 3 1", col4: "Val. 1"}, 
    {col1: "Some value 2", col2: "Another value 2", col3: "Col 3 2", col4: "Val. 2"}, 
    {col1: "Some value 3", col2: "Another value 3", col3: "Col 3 3", col4: "Val. 3"} 
]; 

とHTMLで簡単な表には、次のとおりです。

<table class="table table-hover"> 

    <thead> 
    <tr> 
     <th ng-repeat="column in columns | filter: {show: true}">{{column.description}}</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="asset in assets"> 
     <td ng-repeat="column in columns | filter: {show: true}">{{asset[column.id]}}</td> 
    </tr> 
    </tbody> 

</table> 

あなたは$scope.columns配列内の列の順序を変更した場合、あなたは（NGリピートディレクティブを通じて）HTMLテーブルで起き変更が表示されます。

あなたのニーズに合った便利なヒントやアイデアを得ることを願っています。