如何在一个角度UI的网格单元添加图片 [英] How do I add image in a angular ui-grid cell

问题描述

我如何在增加图像的角 UI网细胞。

  VAR应用= angular.module（'应用'，['ngAnimate'，'ngTouch'，'ui.grid']）;   app.controller（'MainCtrl'，['$范围，$ HTTP'，函数（$范围，$ HTTP）{
     $ scope.gridOptions = {
       enableSorting：真实，
       columnDefs：
         {字段：名称}，
         {场：公司}，
         {场：'形象'}
       ]
       数据：[
         {名：名1，公司公司1，形象：http://cdn.flaticon.com/png/256/70689.png}，
         {名：名称2，公司Company2的形象：http://cdn.flaticon.com/png/256/70689.png}]
   };
 }]）;
 

解决方案

您可以使用自定义模板的细胞来渲染单元格中的图像。

  VAR应用= angular.module（'应用'，['ngAnimate'，'ngTouch'，'ui.grid']）;app.controller（'MainCtrl'，['$范围，$ HTTP'，函数（$范围，$ HTTP）{
  $ scope.gridOptions = {
    enableSorting：真实，
    的rowHeight：100，
    columnDefs：
      {字段：名称}，
      {场：公司}，
      {场：'形象'，cellTemplate：＆LT; IMG WIDTH = \\50像素\\NG-SRC = \\{{grid.getCellValue（行，列）}} \\懒惰-SRC＆gt;中}
    ]
    数据：[
      {名：名1，公司公司1，形象：http://cdn.flaticon.com/png/256/70689.png}，
      {名：名称2，公司Company2的形象：http://cdn.flaticon.com/png/256/70689.png}，
      {名：NAME3，公司：公司3形象：http://cdn.flaticon.com/png/256/70689.png}
      ]
  };}]）;
 

下面是一个工作plnkr。

http://plnkr.co/edit/awQ7B0WmmZhythlCZmgt?p=$p$ PVIEW

How do I add image in a angular ui-grid cell.

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",image:"http://cdn.flaticon.com/png/256/70689.png"},]
   };  
 }]);

解决方案

You can use a custom cell template to render the image in the cell.

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

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

}]);

Here is a working plnkr.

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

这篇关于如何在一个角度UI的网格单元添加图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！