在模态中正确显示ng-grid

时间:2014-12-04 17:15:10

标签: angularjs angular-ui ionic-framework ng-grid angular-ui-grid

我正在玩这个plnkr:http://plnkr.co/edit/DRJtivCrxQy4s22ntsci

控制器是:

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope) {})

.controller('DisplayCtrl', function($scope, ModalFactory) {

 $scope.array = null; //initialize to null

 $scope.run = function() { 

var array = [{ //arbitrary array of UNKNOWN fields
  "a": 0,
  "b": 1
}, {
  "a": 1,
  "b": 8
}, {
  "a": 2,
  "b": 5
}, {
  "a": 3,
  "b": 7
}, {
  "a": 4,
  "b": 0
}, {
  "a": 5,
  "b": 3
}, {
  "a": 6,
  "b": 6
}, {
  "a": 7,
  "b": 4
}, {
  "a": 8,
  "b": 2
}, {
  "a": 9,
  "b": 9
}];

    $scope.array = array;
    ModalFactory.init($scope).then(function(modal) {
                            modal.show();
                });
}

});

Modal是通过工厂创建的:

angular.module('modalfactory',['ionic'])
.service('ModalFactory', function($ionicModal, $rootScope) {
var init = function($scope) {
var promise;
$scope = $scope;
promise = $ionicModal.fromTemplateUrl('array.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
  return modal;
});
$scope.openModal = function() {
   $scope.modal.show();
 };
 $scope.closeModal = function() {
   $scope.modal.hide();
 };
 $scope.$on('$destroy', function() {
   $scope.modal.remove();
 });
return promise;
}
return {
init: init
}
})

如果单击“显示”弹出模式窗口。我希望能够在其中显示任意数组。 ng-grid不按我想要的方式工作。我们怎样才能做到这一点?

2 个答案:

答案 0 :(得分:0)

plunker有一个 lot 错误。您没有将ui.grid模块添加为依赖项,而您实际使用的 ui.grid 的版本是ng-grid模块(早期版本)。

这是一个更新的plunker,显示对话框中的列: http://plnkr.co/edit/BQbSU0iDboS23YISfWGY?p=preview

要做到这一点,我必须:

  • 取出cordova.js脚本标记
  • 'ng-grid'模块添加到app.js模块依赖项
  • 将指令名称从ui-grid更改为ng-grid
  • concat array数据,以便使用相同的对象引用。

这应该有助于你前进。

答案 1 :(得分:0)

我发现这实际上是由于样式表。我使用了自定义程序应用程序并下载了一个新的CSS。网格没有任何变化。