使用 ng-click 加载 ng-grid

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

loading ng-grid with ng-click

html

angularjs

angularjs-directive

ng-grid