2016-03-27 3 views
0

レポートを生成する必要があります。AngularjsとPHPを使用しています。
予想される出力:角度jsを使用して垂直にではなくフェッチされたデータを水平に表示する方法

Spec_ID  Bot_Name        Color    Colorno     Screen 

AN/SN/18 750ML POCO PESCA ROTATION 1 Light Buff Dark Buff Red P1345C P135C P warm red 150-31 150-31 150-31 

実際の出力:

AG/SN/18 750ML POCO PESCA ROTATION 1 Light Buff P1345C 150-31 
AG/SN/18 750ML POCO PESCA ROTATION 1 Dark Buff P135C  150-31 
AG/SN/18 750ML POCO PESCA ROTATION 1 Red  P Warm Red 150-31 

HTML:

<table> 
    <thead> 
     <tr> 
      <th>Spec_ID</th> 
      <th>name</th> 
      <th>lastname</th> 
      <th>Rollno</th> 
      <th>Color</th> 
      <th>Color No</th> 
      <th>Mesh</th>       
    </thead> 
    <tbody> 
     <tr ng-repeat="user in users"> 
      <td>{{user.Spec_Id}}</td> 
      <td>{{user.Name}}</td> 
      <td>{{user.lastname}}</td> 
      <td>{{user.Rollno}}</td> 
      <td>{{user.color}}</td> 
      <td>{{user.colorno}}</td> 
      <td>{{user.Mesh}}</td> 
     </tr> 
    </tbody> 
</table> 

SCRIPT

var request=$http({ 
    method: "post", 
    url:"stock.json", 
    data: { 
    master: $scope.cust 
    } 

}); 
request.success(function(response){ 
    $scope.users = response; 
    //ajax request to fetch data into $scope.data 
}); 

株.json:

Array 
(
    [0] => Array 
     (
      [0] => AG/SN/18 
      [Spec_Id] => AG/SN/18 
      [1] => 750ML POCO PESCA ROTATION 1 
      [Bot_Name] => 750ML POCO PESCA ROTATION 1 
      [2] => Light Buff 
      [color] => Light Buff 
      [3] => P1345C 
      [colorno] => P1345C 
      [4] => 150-31 
      [screen] => 150-31 
     ) 

    [1] => Array 
     (
      [0] => AG/SN/18 
      [Spec_Id] => AG/SN/18 
      [1] => 750ML POCO PESCA ROTATION 1 
      [Bot_Name] => 750ML POCO PESCA ROTATION 1 
      [2] => Dark Buff 
      [color] => Dark Buff 
      [3] => P135C 
      [colorno] => P135C 
      [4] => 150-31 
      [screen] => 150-31 
     ) 

    [2] => Array 
     (
      [0] => AG/SN/18 
      [Spec_Id] => AG/SN/18 
      [1] => 750ML POCO PESCA ROTATION 1 
      [Bot_Name] => 750ML POCO PESCA ROTATION 1 
      [2] => Red 
      [color] => Red 
      [3] => P Warm Red 
      [colorno] => P Warm Red 
      [4] => 150-31 
      [screen] => 150-31 
     ) 

) 

データを垂直に表示する代わりに、データを水平に表示する必要があります。 お願いします。事前に感謝します。

+0

はあなたのNG-繰り返されるヘルプあなたhttp://stackoverflow.com/questions/36238379/nested-ng-repeat-in-angular-js-table/36238460#36238460 –

+0

ことができますか?それはタグ –

+0

@ hadiJZ上にあるはずです。たくさんありがとうございますが、それは私のために働いていません。色、colornoと画面は、テーブルの3つの異なる列です。 – user007

答えて

0

コントローラーに表示するデータを準備し、新しいアレイに追加します。

angular.module('app', []) 
.controller('mainController', ['$scope', '$filter', function($scope, $filter) { 
$scope.data = [{ 
    'Spec_Id': 'AG/SN/18', 
    'Bot_Name': '750ML POCO PESCA ROTATION 1', 
    'color': 'Light Buff', 
    'colorno': 'P1345C', 
    'screen': '150-31' 
    }, { 
    'Spec_Id': 'AG/SN/18', 
    'Bot_Name': '750ML POCO PESCA ROTATION 1', 
    'color': 'Dark Buff', 
    'colorno': 'P135C', 
    'screen': '150-31' 
    }, { 
    'Spec_Id': 'AG/SN/18', 
    'Bot_Name': '750ML POCO PESCA ROTATION 1', 
    'color': 'Red', 
    'colorno': 'P Warm Red', 
    'screen': '150-31' 
    }] 
    var cleanData = function(){ 
    console.log("calling clean data"); 
    $scope.cleanData = []; 
    var id = ''; 
    $scope.data = $filter('orderBy')($scope.data, 'Spec_Id', false); 
    var cleanDataIndex = 0; 
    for(var i = 0; i < $scope.data.length; i++){ 
     var obj = $scope.data[i]; 
     if(id !== obj.Spec_Id){ 
     id = obj.Spec_Id; 
     obj.colorList = obj.color; 
     obj.colornoList = obj.colorno; 
     obj.screenList = obj.screen; 
     $scope.cleanData.push(obj); 
     }else{ 
     var newObj = $scope.cleanData[cleanDataIndex]; 
     newObj.colorList += ","+obj.color; 
     newObj.colornoList += ","+obj.colorno; 
     newObj.screenList += ","+obj.screen; 
     } 
    } 
    } 
    cleanData(); 
}]); 

表示するには、以下を使用します。

<html ng-app='app' ng-controller='mainController'> 
<body> 
    <div class="container"> 
    <div class="jumbotron"> 
     <table class="table table-bordered"> 
     <thead> 
      <tr> 
      <th>Spec Id</th> 
      <th>Bot Name</th> 
      <th>Color</th> 
      <th>Color No</th> 
      <th>Screen</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="row in cleanData"> 
      <td>{{row.Spec_Id}}</td> 
      <td>{{row.Bot_Name}}</td> 
      <td>{{row.colorList}}</td> 
      <td>{{row.colornoList}}</td> 
      <td>{{row.screenList}}</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 
</body> 
</html> 
関連する問題