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

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

javascript angularjs

Javascript 在ng grid angular js中加载不同的图像,javascript,angularjs,Javascript,Angularjs,我在anguar应用程序中使用ng网格。我想根据行索引或某些条件在ng网格中加载不同的图像。下面是html代码 <html ng-app="myApp"> <head lang="en"> <meta charset="utf-8"> <title>Getting Started With ngGrid Example</title> <link rel="stylesheet" type="text/cs

我在anguar应用程序中使用ng网格。我想根据行索引或某些条件在ng网格中加载不同的图像。下面是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>


ngGrid示例入门
经销权

脚本代码

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

})

var-app=angular.module（'myApp'，['ngGrid']）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.myData=[
{资产：“0”，sno：“FTL32541”，车辆：“SUV”，燃油：“40%”，距离：“120公里”}，
{资产：“1”，sno：“FTL18723”，车辆：“轿车”，燃油：“30%”，距离：“200km”}，
{资产：“2”，sno：“FTL28756”，车辆：“双门轿车”，燃油：“90%”，距离：“420km”}，
{资产：“3”，sno：“FTL48733”，车辆：“EV”，燃油：“40%”，距离：“210公里”}，
{资产：“4”，sno：“FLT38524”，车辆：“SUV”，燃油：“10%”，距离：“200km”}，
{资产：“5”，sno：“FLT48733”，车辆：“卡车”，燃油：“100%”，距离：“720km”}，
{资产：，sno:“FLT98755”，车辆：“运动型”，燃油：“20%”，距离：“320公里”}
];
$scope.gridOptions=
{
数据：“myData”，
启用筛选：正确，
启用隐藏：false，
enableSorting:true，
columnDefs：
[
{字段：'asset'，显示名称：'asset'，单元格模板：'}，
{字段：'sno'，显示名称：'Serial Number'}，
{字段：“车辆”，显示名称：“车辆类型”}，
{字段：'fuel'，显示名称：'fuel Level'}，
{字段：“距离”，显示名称：“距离”}
]
};
});
app.filter（'imagefilter'，函数（）{
返回函数（资产）{
如果（资产=='0'）{return'http://goo.gl/aFomAA'; }
如果（资产=='1'）{return'http://goo.gl/vxCnLC'; }
如果（资产=='2'）{return'http://goo.gl/aFomAA'; }
返回“未知”；
};
})

它将根据过滤器函数中的值返回图像源。但我得到的结果是类似html的图像

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

我希望正确的图像标签应该放在ng网格行内。

您的

img

格式不正确。你有：

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

好的，在您的示例中data

asset=”“

@Lucas谢谢。我已经更新了问题。

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