Question

我正在尝试在单击按钮时加载ng-grid但它无法正常工作。但它在负载上运行良好。为什么呢？

HTML：

<a href="" ng-click="loadGrid()">Load Grid</a>
<div ng-grid="ngOptions"></div>


$scope.ngData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];

$scope.loadGrid = funtion(){
 $scope.ngOptions = { data: 'ngData' };
};

Answer 1

您可以使用空数组初始化数据，以便预先初始化ng-grid，然后点击更改数据，如下所示：

$scope.myData = [];

$scope.ngOptions = { data: 'myData' };

$scope.loadGrid = function(){
  $scope.myData = [
    { Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
    { Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
    { Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
    { Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
  ];
};

这是一个有效的plunker

Answer 2

请检查此http://plnkr.co/edit/8H4NHFP59gWTxURwQKZw?p=preview

HTML：

 <a href="" ng-click="loadGrid()">Load Grid</a>
 <div ng-show="ngData.length">
     <div  ng-grid="ngOptions" ></div>
 </div>

控制器

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.ngData = [];
    $scope.ngOptions = {
        data: 'ngData'
    };
    $scope.loadGrid = function() {
        $scope.ngData = [
            { Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
            { Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
            { Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
            { Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
        ];
    }
});

使用ng-click加载ng-grid

2 个答案: