CODEWITHSUNDEEP
javascriptcssangularjs
nikunj2512
nikunj2512

Reputation: 621

Angularjs and dynamic chart legend issue

i am trying to create chart legend using ng-repeat in angularjs but not able to achieve correct styling which i am trying.

Usecases:

1) When number of legend is 1, it should look like this:

enter image description here

2) When number of legends are 2, it should look like this:

enter image description here

3) When number of legends are 3, it should look like this:

enter image description here

4) When number of legends are 4, it should look like this:

enter image description here

function TodoCtrl($scope) {
  $scope.legendConfig = {
    legendLabels: [{
      label: "label 1",
      color: "steelblue"
    }, {
      label: "label 1",
      color: "red"
    }, {
      label: "label 1",
      color: "blue"
    }, {
      label: "label 1",
      color: "yellow"
    }]
  };
}
  .my-legend .legend-scale ul {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    float: left;
    list-style: none;
  }
  .my-legend .legend-scale ul li {
    display: inline-block;
    Font-Family: Metric-Regular;
    Font-Size: 12px;
    Color: #666666;
    list-style: none;
    line-height: 18px;
    vertical-align: text-top;
  }
  .my-legend ul.legend-labels li span {
    display: inline-block;
    height: 9px;
    width: 9px;
    margin-right: 5px;
    margin-left: 10px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <div class='my-legend pull-right'>
      <div class='legend-scale'>
        <ul class='legend-labels' ng-repeat="legend in legendConfig.legendLabels">
          <li><span style='background:{{ legend.color }};'></span>{{ legend.label }}</li>
        </ul>
      </div>
    </div>
  </div>
</div>

And so on for. So every odd number of legend should be added horizontally and even ones should be added vertically like described in use-cases.

Jsfiddle

Upvotes: 0

Views: 513

Answers (1)

Venugopal
Venugopal

Reputation: 1896

you can divide legendLabels into even and odd items and iterate over them.

$scope.evenLegendLabels = $scope.legendConfig.legendLabels.filter(function(num, i){ if( i % 2 ) return num;});
$scope.oddLegendLabels = $scope.legendConfig.legendLabels.filter(function(num, i){ if( i % 2 === 0) return num;});

html

<ul class='legend-labels'>
    <li ng-repeat="legend in evenLegendLabels">
        <span style='background:{{ legend.color }};'></span>{{ legend.label }}
    </li>
</ul>
<ul class='legend-labels'>
    <li ng-repeat="legend in oddLegendLabels">
        <span style='background:{{ legend.color }};'></span>{{ legend.label }}
    </li>
</ul>

output will be like

item 1 | item 3 | item 5 | item 7

item 2 | item 4 | item 6 | item 8

check this plnkr

EDIT

use $odd and $even in the template to avoid creating addition variables.

<ul class='legend-labels'>
    <li ng-repeat="legend in legendConfig.legendLabels" ng-if="$odd">
        <span style='background:{{ legend.color }};'></span>{{ legend.label }}
    </li>
</ul>
<ul class='legend-labels'>
    <li ng-repeat="legend in legendConfig.legendLabels" ng-if="$even">
        <span style='background:{{ legend.color }};'></span>{{ legend.label }}
    </li>
</ul>

updated plnkr

Upvotes: 1

Related Questions