각도 그리드에 사용자 정의 스타일 적용

Question

각도 프로젝트에서 ng-grid (UI-grid)를 사용하고 있습니다. 내 클라이언트가 모형 테이블로 표 형태의 그리드를 제공했습니다. 이제 클라이언트 디자인에 따라 UI 그리드를 디자인하고 싶습니다.

제게 어떻게 이것을 할 수 있는지 제안 해주십시오.

Answer 1

다음은 ng-grid에 이미지를 추가하는 방법의 예입니다. 당신은 cellTemplate을 사용할 수 있고, 이것의 내용은

// main.js 

var에 응용 = angular.module ('을 myApp', [ 'ngGrid']) ...뿐만 아니라 별도 * .html 파일로 저장할 수 있습니다;

app.controller ('MyCtrl'기능 ($ 범위, $ 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>' 
     } 
    ] 
}; 

});