I have integrated ng-grid into my Angular application and I am looking to display different images in the ng-grid based on certain conditions or row index. Below is the HTML code snippet:
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="ng-grid-2.0.14.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<div class="header"> <span> DealerShip </span></div>
<div>
</div>
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</body>
</html>
Script code:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [
{ asset: "0", sno: "FTL32541", vehicle: "SUV", fuel: "40%", distance: "120km" },
{ asset: "1", sno: "FTL18723", vehicle: "Sedan", fuel: "30%", distance: "200km" },
{ asset: "2", sno: "FTL28756", vehicle: "Coupe", fuel: "90%", distance: "420km" },
{ asset: "3", sno: "FTL48733", vehicle: "EV", fuel: "40%", distance: "210km" },
{ asset: "4", sno: "FLT38524", vehicle: "SUV", fuel: "10%", distance: "200km" },
{ asset: "5", sno: "FLT48733", vehicle: "TRuCK", fuel: "100%", distance: "720km" },
{ asset: "", sno: "FLT98755", vehicle: "Sports", fuel: "20%", distance: "320km" }
];
$scope.gridOptions =
{
data: 'myData',
enableFiltering: true,
enableHiding: false,
enableSorting: true,
columnDefs:
[
{ field: 'asset', displayName: 'Asset', cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text><img class="flag" ng-src="{{ row.getProperty(\'asset\') | imagefilter}} "</img></span></div>' },
{ field: 'sno', displayName: 'Serial Number' },
{ field: 'vehicle', displayName: 'Vehicle Type' },
{ field: 'fuel', displayName: 'Fuel Level' },
{ field: 'distance', displayName: 'Distance' }
]
};
});
app.filter('imagefilter', function () {
return function (asset) {
if (asset === '0') { return 'http://goo.gl/aFomAA'; }
if (asset === '1') { return 'http://goo.gl/vxCnLC'; }
if (asset === '2') { return 'http://goo.gl/aFomAA'; }
return 'unknown';
};
})
After implementing the filter, I encountered an issue with the generated HTML output as shown below:
<div ng-cell=""><img class="flag ng-scope" ng-src="http://goo.gl/aFomAA" <="" img="" src="http://goo.gl/aFomAA"></div>
I aim to integrate the proper image tag within the ng-grid rows.