CODEWITHSUNDEEP
angularjsng-gridangular-ng-if
user3812457
user3812457

Reputation: 157

How could i display the ng-grid cell data based on various conditions in AngularJS

I have a grid display in HTML page with dynamic data display in gird ,I want to display 7 colors in a third cell of every row in the grid ,based on the condition i have to display the colors , i am using if conditions for checking the conditions for colors .How could i display the colors in the third cell of every row of grid based on conditions in angular. In the following pluker eg code 

`http://plnkr.co/edit/AM6JuSXZCQ9NkYpbBSUU?p=preview,`

But i have toshow multiple colors in a single cell based on conditions ,my target image would be target image
In this for moroni displaying 2 color buttons based on conditions.

Upvotes: 0

Views: 2048

Answers (1)

mainguy
mainguy

Reputation: 8331

Look at this Plunker

The colorbars are defined in the css and are applied to some state variables in the data-scope.

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.myData = [{
    name: "Moroni",
    state1: true
  }, {
    name: "Tiancum",
    state1: false,
    state2: true,
    state3: false
  }, {
    name: "Jacob",
    state1: true,
    state2: true,
    state3: false
  }, {
    name: "Nephi",
    state1: false,
    state2: true,
    state3: true
  }, {
    name: "Enos",
    state1: true,
    state2: true,
    state3: true
  }];
  $scope.gridOptions = {
    data: 'myData',
    rowHeight: 40,
    columnDefs: [{
      field: 'name',
      displayName: 'Name'
    }, {
      field: 'rgb',
      displayName: 'Age',
      cellTemplate: '<div ng-class="{redbar: row.entity.state1,whitebar:!row.entity.state1}" ></div>' +
        '<div ng-class="{greenbar: row.entity.state2,whitebar:!row.entity.state2}" ></div>' +
        '<div ng-class="{bluebar: row.entity.state3,whitebar:!row.entity.state3}" ></div>'
    }]
  };

As you can see I only used three states and the respective colorbars since it's monday and I am still tired and lazy.:-)

Also note that I adjusted the rowHeight to fit all bars in one Cell. After adjusting the css with heights, margins and paddings, you should do this too.

Upvotes: 1

Related Questions