Question

我需要生成报告。我正在使用Angularjs和PHP。
预期产出：

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
});

stock.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
        )

)

不应垂直显示数据，而应水平显示数据。请建议我。谢谢。

Answer 1

我会准备数据以便在控制器中显示并将其添加到新数组中。

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>

如何水平显示获取的数据而不是垂直使用角度js

1 个答案: