dynamic image in angular grid header

Question

I am trying to create an angular grid with dynamic images in the headers. I am using headerCellTemplate to create the image in the grid. If I hard code the url for the image it works. If I try to us {{url}} and $scope.url = "http\something" for the url it does not seem to be resolving the url. Any help with resolving this would be greatly appreciated. I have an example here: http://plnkr.co/edit/DO8vxnq8H7IDBF9u16F3?p=preview

    var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
var myHeader = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span>"
 + "<img ng-src={{url}} alt=\"Mountain View\" style=\"width:100px;height:30px;\"></span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>";

var myHeader2 = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span>"
 + "<img ng-src=\"https://angularjs.org/img/AngularJS-large.png\" alt=\"Mountain View\" style=\"width:100px;height:30px;\"></span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>";

  $scope.gridOptions = {
    enableSorting: true,
    rowHeight:100,
    columnDefs: [
      { field: 'name' },
      { field: 'pet',headerCellTemplate: myHeader2  },
      { field: 'color', headerCellTemplate: myHeader}
    ],
    data:[
      {name:"Thor",pet:"dog",color:"brown"},
      {name:"Athena",pet:"dog 2",color:"white"},
      {name:"Sandy",pet:"dog 3",color:"brown"}
      ]
  };
     $scope.url = "https://angularjs.org/img/AngularJS-large.png";
}]);

thanks

Paritosh · Accepted Answer · 2016-01-13 06:27:13Z

1

Try like this; in your HTML

<img ng-src="https://{{url}}"/>

In controller,

$scope.url = 'angularjs.org/img/AngularJS-large.png';

Have a look at this JSFiddle

answered Jan 13, 2016 at 6:27

Paritosh

11.7k5 gold badges64 silver badges80 bronze badges

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

Comments

Anoop M M · Accepted Answer · 2016-01-13 06:28:41Z

please use like this

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http',
  function($scope, $http) {
    $scope.url = "https://angularjs.org/img/AngularJS-large.png";
    var myHeader = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span>" + "<img ng-src='" + $scope.url + "' alt=\"Mountain View\" style=\"width:100px;height:30px;\"></span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>";

    var myHeader2 = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span>" + "<img ng-src=\"https://angularjs.org/img/AngularJS-large.png\" alt=\"Mountain View\" style=\"width:100px;height:30px;\"></span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>";

    $scope.gridOptions = {
      enableSorting: true,
      rowHeight: 100,
      columnDefs: [{
        field: 'name'
      }, {
        field: 'pet',
        headerCellTemplate: myHeader
      }, {
        field: 'color',
        headerCellTemplate: myHeader
      }],
      data: [{
        name: "Thor",
        pet: "dog",
        color: "brown"
      }, {
        name: "Athena",
        pet: "dog 2",
        color: "white"
      }, {
        name: "Sandy",
        pet: "dog 3",
        color: "brown"
      }]
    };
    $scope.url = "https://angularjs.org/img/AngularJS-large.png";
  }
]);

Collectives™ on Stack Overflow

dynamic image in angular grid header

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