Как отсортировать вложенную таблицу с несколькими ng-повторами angularjs - PullRequest
Новая
       11

Как отсортировать вложенную таблицу с несколькими ng-повторами angularjs

0 голосов
/ 15 мая 2018

Я искал похожий пример и нашел потерянные примеры, но ни один из них не имеет такую ​​же структуру данных, как мои данные json, поэтому я попробовал все это безуспешно.Это мои данные json 

vm.result = [
  {
    'first': [ 
      {"indicate":"all", "text":"All views"},
      {"indicate":"userview", "text":"User view"},
      {"indicate":"operatorview", "text":"Operator view"}
    ]
  },
  {
    'second': [ 
      {"indicate":"receipts","text":"Receipts"},
      {"indicate":"other", "text":"Other"},
      {"indicate":"error", "text":"Error resolver"}
    ]
  }
];

Это моя таблица 

<table class="table" >
  <thead>
    <tr>
      <th ng-show="column">Key</th>
      <th>Master</th>
      <th>Editable</th>
    </tr>
  </thead>
  <tbody ng-repeat="res in vm.result track by $index">
    <tr  ng-repeat="ed in res.first | filter: searchfield | orderBy: 'indicate'  track by $index">
      <td {{ed.indicate}}</td>
      <td>{{ed.text}}</td>
      <td> {{vm.result[1].second[$index].indicate}}</td>
      <td > {{vm.result[1].second[$index].text}}</td>               
    </tr>
  </tbody>
</table>

OrderBy работает только для первого массива, но не для второго, и да, я попытался удалить первый после re во второмng-repeat, но затем он не может распознать его как массив.Мне нужна эта структура в таблице, чтобы у каждого массива были свои столбцы для своих данных.Так как же добавить указатель orderBy для обоих массивов?

Ожидаемый результат: 

Master           Editable
all      |   All      | receipts   | Receipts
userview | User view  | other      |Other

1 Ответ

0 голосов
/ 16 мая 2018

Формат данных результатов очень плохой.Очень сложно конвертировать ожидаемый результат.Попробуйте использовать массив результатов как этот или конвертировать в этот тип формата, 

$scope.newResult   = [{
     first:{"indicate":"all", "text":"All views"},
    second:{"indicate":"receipts","text":"Receipts"}
  },
  {
     first:{"indicate":"userview", "text":"User views"},
    second:{"indicate":"other","text":"Other"}
  },
  {
     first:{"indicate":"operatorview", "text":"Operator views"},
    second:{"indicate":"error","text":"Error resolver"}
  }
]

HTML-код 

<table >
   <thead>
    <tr>
     <th>Key</th>
      <th colspan="2">Master</th>
      <th colspan="2">Editable</th>
    </tr>
  </thead>
  <tbody >
 <tr ng-repeat="res in new">
 <td>{{$index+1}}</td>
    <td>{{res.first.indicate}}</td>
    <td>{{res.first.text}}</td>
    <td>{{res.second.indicate}}</td>
    <td>{{res.second.text}}</td>
  </tr>
  </tbody>

  </table>

Контроллер 

 $scope.result = [
  {
    'first': [ 
      {"indicate":"all", "text":"All views"},
      {"indicate":"userview", "text":"User view"},
      {"indicate":"operatorview", "text":"Operator view"}
    ]
  },
  {
    'second': [ 
      {"indicate":"receipts","text":"Receipts"},
      {"indicate":"other", "text":"Other"},
      {"indicate":"error", "text":"Error resolver"}
    ]
  }

];
$scope.new=[];
angular.forEach($scope.result, function(value, key) {
    if(key ===0){
    angular.forEach(value.first, function(val, k) {
     $scope.new.push({'first':val,'second':''});
     })
    }
    if(key ===1){
    angular.forEach(value.second, function(val, k) {
     $scope.new[k].second = val;
     })
    }

});

Используя этот тип механизмаВы можете получить ожидаемый результат, но лучший способ - использовать хороший формат данных для массива результатов. jsfiddle для этого.

...