Как показать извлеченные данные по горизонтали, а не по вертикали, используя угловые JS

Question

Как показать извлеченные данные по горизонтали, а не по вертикали, используя угловые JS

0

Мне нужно сгенерировать отчеты. Я использую 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
        )

)

Вместо того, чтобы показывать данные по вертикали, он должен показывать данные по горизонтали. Пожалуйста, предложите мне. Спасибо заранее.

user007 27 март 2016, в 11:44

Источник

0

может помочь вам stackoverflow.com/questions/36238379/…
Hadi J 27 март 2016, в 09:24
0

Где твой нг-повтор? Должен быть на тэге <tr>
David Maes 27 март 2016, в 09:36
0

@hadiJZ.ThankshadiJZ. Большое спасибо, но у меня это не сработало. color, colorno и screen - это три разных столбца таблицы.
user007 27 март 2016, в 09:38
0

Вы хотите сказать, что вы хотите сгруппировать элементы по color например?
Mosh Feu 27 март 2016, в 09:47
0

@MoshFeu.Yes.MoshFeu.Yes. Вот так например .. {{x.color}}. Таким образом, они покажут данные для этого Spec_Id.
user007 27 март 2016, в 09:54

Показать ещё 3 комментария

Теги:

html

angularjs

json

1 ответ

Ещё вопросы

может помочь вам stackoverflow.com/questions/36238379/…
Где твой нг-повтор? Должен быть на тэге <tr>
@hadiJZ.ThankshadiJZ. Большое спасибо, но у меня это не сработало. color, colorno и screen - это три разных столбца таблицы.
Вы хотите сказать, что вы хотите сгруппировать элементы по color например?
@MoshFeu.Yes.MoshFeu.Yes. Вот так например .. {{x.color}}. Таким образом, они покажут данные для этого Spec_Id.

Michael · Answer 1 · 2016-03-27T15-13-00.000Z

Я бы подготовил данные для отображения в контроллере и добавил его в новый массив.

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>