Adding image using filters in Angularjs for ng-grid

Question

http://plnkr.co/edit/YwjYmGiMKueSUhCQRrWL?p=preview

Hi, This is my plunkr code, i need to insert images For the "Dude" coloumn in the grid table.Actually for true i need to insert one image and for false the other image. Please suggest me this is the right way or another approach is helpful.

Thanks

        <!DOCTYPE html>
    <html ng-app="myApp">
        <head lang="en">
            <meta charset="utf-8">
            <title>Custom Plunker</title>  
            <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
            <link rel="stylesheet" type="text/css" href="style.css" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
            <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
            <script type="text/javascript" src="script.js"></script>
        </head>
        <body ng-controller="MyCtrl">
            <div class="gridStyle" ng-grid="gridOptions"></div>
        </body>
    </html>



    // Code goes here

    var app = angular.module('myApp', ['ngGrid']);
    app.controller('MyCtrl', function($scope) {
      $scope.myData = [{
        name: "Moroni",
        age: 50,
        dude: true
      }, {
        name: "Tiancum",
        age: 43,
        dude: true
      }, {
        name: "Jacob",
        age: 27,
        dude: false
      }, {
        name: "Nephi",
        age: 29,
        dude: true
      }, {
        name: "Enos",
        age: 34,
        dude: false
      }];
      $scope.gridOptions = {
        data: 'myData',
        columnDefs: [{
          field: 'name',
          displayName: 'Name'
        }, {
          field: 'age',
          displayName: 'Age'
        }, {
          field: 'dude',
          displayName: 'Dude',
          cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text><img class="flag" ng-src="row.getProperty(\'dude\') | imagefilter"</img></span></div>',

        }]
      };

    });
    app.filter('imagefilter', function() {
      console.log(1);
        return function(dude) { 
            if(dude==='true') 
            return "http://www.gravatar.com/avatar/%7B%7Bvisitor.user.gravatar_id%7D%7D?s=20";
            //other mappings
       }
    });

    enter code here
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px
}

.green {
  background-color: green;
    color: white;
}

mainguy · Accepted Answer · 2014-12-10 10:13:51Z

1

Write you cell template like this:

cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text><img class="flag" src="{{row.entity.dude| imagefilter}}"></img></span></div>'

(Expressions should be in double brackets)

And your filter like this:

app.filter('imagefilter', function() {
  console.log(1);
  return function(dude) {
    if (dude === true) {
      return "http://www.gravatar.com/avatar/%7B%7Bvisitor.user.gravatar_id%7D%7D?s=20";
    }
    //other mappings
  }
});

(Removed the quotes from the condition.)

Look at this Plunker

answered Dec 10, 2014 at 10:13

mainguy

8,3312 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kumar · Accepted Answer · 2014-12-11 06:31:08Z

0

mainguy unfortunately your plunker could not be found . I am still not eligible to add a comment so i am adding my comment as a repl

answered Dec 11, 2014 at 6:31

Kumar

35 bronze badges

Collectives™ on Stack Overflow

Adding image using filters in Angularjs for ng-grid

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related