如何使用角度js ng-grid在一列网格中显示图像?

时间:2015-03-02 11:53:51

标签: angularjs ng-grid

我对角度JS完全不熟悉,请告诉我如何使用角度JS将图像显示为网格中某些列的值。

1 个答案:

答案 0 :(得分:3)

如果我的问题正确,您可以将img标记绑定到角度网格作为单元格模板。我为你创造了一个Plunker。检查http://plnkr.co/edit/YIBa7np3kjip2Zzx7nBB?p=preview

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

app.controller('MainCtrl', ['$scope','$sce', function ($scope,$sce) {



$scope.img="<img ng-src={{url}} />";
$scope.img="<img src='https://angularjs.org/img/AngularJS-large.png' />";
$scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'lastName' },
          { name:'city', field: 'company'},
          { name:'getZip', field: 'employed', enableCellEdit:true},
          { name:'Photo', field:'photoP' ,cellTemplate:"<img src='https://angularjs.org/img/AngularJS-large.png' />"}
        ],
         data : [
          { 
              "first-name": "Cox",
              "lastName": "Carney",
              "company": "Enormo",
              "employed": true,
              "photoP":""
          },
          {
              "first-name": "Lorraine",
              "lastName": "Wise",
              "company": "Comveyer",
              "employed": false,
              "photoP":""
          },
          {
              "first-name": "Nancy",
              "lastName": "Waters",
              "company": "Fuelton",
              "employed": false,
              "photoP":""
          }
        ]
      };

}]);