角UI網格重複上虛擬滾動

cellTemplates我已經在某些列的測試角UI柵cellTemplate和已經注意到，上滾動數據被正確地通過顯示自定義cellTemplates細胞的異常更新。 http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview 角UI網格重複上虛擬滾動

JS：

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

app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', function ($scope, $http, $log, $timeout) { 
     var customTemp = '<img ng-init="url=COL_FIELD" src="https://dummyimage.com/100x100/000/fff&text={{url}}" alt="Smiley face" height="100" width="100">' 
     $scope.gridOptions = {}; 

    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
    .success(function(data) { 
     $scope.gridOptions.data = data; 

    }); 
    $scope.gridOptions.rowHeight = 50; 
    $scope.gridOptions.columnDefs = [ 

    { name:'eee' }, 
    { name:'age' }, 
    { name:'address.street'} 
    ]; 
    $scope.gridOptions2 = {}; 
    $scope.gridOptions2.data =[]; 
    $scope.gridOptions2.rowHeight =100; 
    $scope.gridOptions2.columnDefs =[]; 
    var timer = function() { 


    for (i = 1; i < 100; i++) { 
     $scope.gridOptions2.data.push({ 
      value:i, 
      name:'Name'+i, 
      url:'https://dummyimage.com/30x30/000/fff&text='+i, 
      image:i 
     }); 

    } 
    $scope.gridOptions2.columnDefs =[{ 
     name:'image', 
     cellTemplate:customTemp, 
     width:100 
    }, 
    { 
     name:'name', 
     cellTemplate:customTemp, 
     width:100 
    }, 
    { 
     name:'url', 
     width:50 
    }, 
    { 
     name:'value' 
    } 
    ]; 



    }; 

$timeout(timer,0); 
console.log($scope.gridOptions); 
console.log($scope.gridOptions2); 
}]);

HTML：

<!doctype html> 
<html ng-app="app"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
    <script src="http://ui-grid.info/release/ui-grid.js"></script> 
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"> 
    <link rel="stylesheet" href="main.css" type="text/css"> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://npmcdn.com/[email protected]/ui-grid.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script> 
    <script src="https://npmcdn.com/[email protected]/ui-grid.min.js"></script> 
    <script src="https://npmcdn.com/[email protected]/dist/autoFitColumns.min.js"></script> 
    </head> 
    <body> 

<div ng-controller="MainCtrl"> 
    <div> 
    <div ui-grid="gridOptions2" 
     ui-grid-auto-fit-columns 
     ui-grid-pagination 
     ui-grid-resize-columns 
     class="full-height"></div> 

    <div ui-grid="gridOptions" 
     ui-grid-auto-fit-columns 
     ui-grid-pagination 
     ui-grid-resize-columns 
     class="full-height"></div>  
    </div> 
</div> 


    <script src="app.js"></script> 
    </body> 
</html>

來源

2017-06-19 Al Ex Tsm

我不明白你的plunker指令，我沒有看到它正在使用的任何地方。預期的結果是什麼？ – Raulucco

@Raulucco感謝您詢問我在plnkr添加的指令是解決問題的方法... –

解決方案：一個觀察者對COL_FIELD添加指令：

這裏是不受歡迎的行爲通過plnkr轉載

工作：plnkr：http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview

個

JS：

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


app.directive('myDirective', function ($log) { 

    return { 
     restrict: 'E', 
     replace: true, 

     scope: { 
      url: '=' 
     }, 

     template: '<img src="https://dummyimage.com/100x100/000/fff&text={{url}}" alt="Smiley face" height="100" width="100">', 
     link: function (scope, element, attrs) { 
      scope.$watch('url', function(newValue) { 
      var url = newValue; 
      }); 
     } 
    }; 
}); 



app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', function ($scope, $http, $log, $timeout) { 

    var customTemp = '<div><my-directive url="MODEL_COL_FIELD" /></div>'; 

    $scope.gridOptions = {}; 

    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
    .success(function(data) { 
     $scope.gridOptions.data = data; 

    }); 
    $scope.gridOptions.rowHeight = 50; 
    $scope.gridOptions.columnDefs = [ 

    { name:'eee' }, 
    { name:'age' }, 
    { name:'address.street'} 
    ]; 
    $scope.gridOptions2 = {}; 
    $scope.gridOptions2.data =[]; 
    $scope.gridOptions2.rowHeight =100; 
    $scope.gridOptions2.columnDefs =[]; 
    var timer = function() { 


    for (i = 1; i < 100; i++) { 
     $scope.gridOptions2.data.push({ 
      value:i, 
      name:'Name'+i, 
      url:'https://dummyimage.com/30x30/000/fff&text='+i, 
      image:i 
     }); 

    } 
    $scope.gridOptions2.columnDefs =[{ 
     name:'image', 
     cellTemplate:customTemp, 
     width:100 
    }, 
    { 
     name:'name', 
     cellTemplate:customTemp, 
     width:100 
    }, 
    { 
     name:'url', 
     width:50 
    }, 
    { 
     name:'value' 
    } 
    ]; 



    }; 

$timeout(timer,0); 
console.log($scope.gridOptions); 
console.log($scope.gridOptions2); 
}]);

來源

2017-06-19 10:52:56

角UI網格重複上虛擬滾動

回答

相關問題