Split table by a source parameter in AngularJs table

Question

I have a table of strings. each string has a lang.

I want to display the langs in columns. How should I do?

My code (also a CodePen) bellow, is displaying both languages in the same column. I want to split them.

var app = angular.module('testApp', []);
app.controller("testController", ['$scope', function($scope){  
  var getItems = function(){ return [
      {key:1,lang:'en',text:"Hello"},
      {key:1,lang:'fr',text:"Bonjour"},
      {key:2,lang:'en',text:"How are you"},
      {key:2,lang:'fr',text:"ça va"},
      {key:2,lang:'en',text:"So"},
      {key:2,lang:'fr',text:"Alors"}
    ];};
  $scope.items = getItems();
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp">
<table ng-controller="testController" st-table="items">
  <tr><th>en</th><th>fr</th></tr>
  <tr ng-repeat="item in items"><td>{{item.text}}</td><td>{{item.text}}</td></tr>
</table>
</div>

PS.

If tomorrow I will have one more language, say "de", I would like to keep the code unchanged.

serhio · Accepted Answer · 2017-08-04 10:33:37Z

I found a solution from this thread using lodash

var app = angular.module('testApp', []);
app.controller("testController", ['$scope', function($scope){  
  var getItems = function(){ return [
      {key:1,lang:'en',text:"Hello"},
      {key:1,lang:'fr',text:"Bonjour"},
      {key:2,lang:'en',text:"How are you"},
      {key:2,lang:'fr',text:"ça va"}
    ];};
  $scope.items = getItems();
  
  $scope.headCells = _.keys(_.groupBy($scope.items, function(item){ return item.lang; }));
  $scope.rows = _.groupBy($scope.items, function(item){ return item.key; });
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp">
<table ng-controller="testController" st-table="items" class="table table-striped">  
  <tr><th ng-repeat="lang in headCells">{{lang}}</th></tr>
  <tr ng-repeat="(key, items) in rows"><td ng-repeat="item in items">{{item.text}}</td></tr>
</table>
</div>

Collectives™ on Stack Overflow

Split table by a source parameter in AngularJs table

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related