Question

我在我的anguar应用程序中使用ng-grid。我想基于行索引或某些条件在ng-grid中加载不同的图像。低于HTML代码

<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>

脚本代码

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';
    };

})

它基于该过滤器函数中的值返回图像源。但我得到了像图像

的html

<div ng-cell=""><img class="flag ng-scope" ng-src="http://goo.gl/aFomAA" <="" img="" src="http://goo.gl/aFomAA"></div>

我希望将正确的图像标记放在ng-grid行内。

Answer 1

您的img格式不正确。你有：

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

但是img是自我关闭的。它应该是：

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

在ng-grid angular js中加载不同的图像

1 个答案: