angularjs – 如何在角度ui网格单元格中添加图像

发布时间：2020-12-17 18:11:47 所属栏目：安全来源：网络整理

导读：如何在角度ui网格单元格中添加图像. var app = angular.module('app',['ngAnimate','ngTouch','ui.grid']); app.controller('MainCtrl',['$scope','$http',function ($scope,$http) { $scope.gridOptions = { enableSorting: true,columnDefs: [ { field: 'n

如何在角度ui网格单元格中添加图像.

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

   app.controller('MainCtrl',['$scope','$http',function ($scope,$http) {
     $scope.gridOptions = {
       enableSorting: true,columnDefs: [
         { field: 'name' },{ field: 'company'  },{ field: 'image'}
       ],data:[
         {name:"Name1",company:"Company1",image:"http://cdn.flaticon.com/png/256/70689.png"},{name:"Name2",company:"Company2",]
   };  
 }]);

解决方法

您可以使用自定义单元格模板在单元格中呈现图像.

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

app.controller('MainCtrl',$http) {
  $scope.gridOptions = {
    enableSorting: true,rowHeight:100,columnDefs: [
      { field: 'name' },{ field: 'image',cellTemplate:"<img width="50px" ng-src="{{grid.getCellValue(row,col)}}" lazy-src>"}
    ],data:[
      {name:"Name1",{name:"Name3",company:"Company3",image:"http://cdn.flaticon.com/png/256/70689.png"}
      ]
  };

}]);

这是一个有效的plnkr.

http://plnkr.co/edit/awQ7B0WmmZhythlCZmgt?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!