将自定义样式应用于角度ng-grid

时间:2014-10-01 15:24:18

标签: ng-grid

我在角度项目中使用ng-grid(UI-grid)。 我的客户给了我tabled grid作为样机。现在我想根据客户端设计设计UI网格。

请告诉我如何实现这一目标。

1 个答案:

答案 0 :(得分:0)

以下是如何将图像添加到ng-grid的示例。你必须使用cellTemplate,它的内容也可以存储到一个单独的* .html文件中......

// main.js

var app = angular.module('myApp',['ngGrid']);

app.controller('MyCtrl',function($ scope,$ http){

$http.post('/MyPage/index.json?details=full').success(function (data) {
    $scope.carData = data;
});

$scope.updatecar =function(row){
   $http.post('/MyPage/index.json?details=&carID='+row.getProperty('carID')+'&enable='+row.getProperty('link')).success(function (data) {          
    $scope.carData = data;
});     
};

$scope.gridOptions = {
    data: 'carData',
    columnDefs: [{field: 'carName', displayName: 'car Name'},
        {field: 'carTemperature', displayName: 'Temperature'
            , cellTemplate: 
                    '<div ng-class="ngCellText">' +
                    '{{row.getProperty(col.field)}} <img ng-src="{{row.getProperty(\'imageName\')}}" alt=""/>'+                        
                    '  <a href ="" ng-click="updatecar(row)">' +
                    '{{row.getProperty(\'linkText\')}} </a>' +
                    '</div>'
        }
    ]
};

});