Load different Images in ng-grid angular js

Question

I am using ng-grid in my anguar application. I want to load different images in ng-grid based on row index or some condition. below html code

<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://www.ukcasinolist.co.uk/wp-content/uploads/2013/01/green_tick_small.gif'; }
        if (asset === '1') { return 'http://old.paulmcmahon.tv/images/small-red-dot.gif'; }
        if (asset === '2') { return 'http://www.ukcasinolist.co.uk/wp-content/uploads/2013/01/green_tick_small.gif'; }
        return 'unknown';
    };

})

It is returning the image source based on the value in that filter function. but i got the resultant html like image

<div ng-cell=""><img class="flag ng-scope" ng-src="http://www.ukcasinolist.co.uk/wp-content/uploads/2013/01/green_tick_small.gif" <="" img="" src="http://www.ukcasinolist.co.uk/wp-content/uploads/2013/01/green_tick_small.gif"></div>

I want proper image tag should be placed inside ng-grid row.

well, in your example data asset=""

Lucas Rodriguez
– Lucas Rodriguez

2015-12-17 07:54:29 +00:00
Commented Dec 17, 2015 at 7:54 — Lucas Rodriguez
– Lucas Rodriguez, Commented Dec 17, 2015 at 7:54
@Lucas thanks. i have updated the question.

SivaRajini
– SivaRajini

2015-12-17 08:00:33 +00:00
Commented Dec 17, 2015 at 8:00 — SivaRajini
– SivaRajini, Commented Dec 17, 2015 at 8:00

Lucas Rodriguez · Accepted Answer · 2015-12-17 08:04:17Z

1

Your img is not formatted properly. You have:

 <img class="flag" ng-src="{{ row.getProperty(\'asset\') | imagefilter}} "</img>

But img is self-closing. It should be:

<img class="flag" ng-src="{{ row.getProperty(\'asset\') | imagefilter}} " />

answered Dec 17, 2015 at 8:04

Lucas Rodriguez

1,2036 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Load different Images in ng-grid angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related