Question

main.js

(function(){
    var myModule = angular.module("myModule",["ngGrid"]);
    myModule.controller("listController", ["$scope", "$log", function($scope, $log) {
        $scope.mySelections = [];
        $scope.myData = [{descripition: "product 1"}, {description: "product 2"}];
        $scope.gridOptions = {
             data: "myData",
             multiSelect: true,
             selectedItems: $scope.mySelections
        }

        $scope.start = function() {
         // Even though the grid rows are selected, length is always zero. Dont know why
         $log.info($scope.mySelections.length);
        }
    });
});

的index.html //仅显示相关代码

<div ng-controller="listController" class="row">
<div class="gridStyle" ng-grid="gridOptions"></div>
<!-- This shows up correctly -->
<pre>{{mySelections}}</pre>
<button class="btn btn-primary" ng-click="start()"></button>
</div>

问题：我在index.thml上的“mySelections”中获取了所选项目，但是“listController”的“Start”函数中的数组似乎是空的。一直试图解决这个问题几个小时，不明白为什么会这样。

Answer 1

请参阅下面添加的代码注释：

(function(){
    var myModule = angular.module("myModule",["ngGrid"]);
    /* on below line I removed your declared dependencies as are not needed (["$scope", "$log", ...) they get injected by angular*/
    myModule.controller("listController", function($scope, $log) {
        $scope.mySelections = [];
        /*here was a typo: descripition vs. description*/
        $scope.myData = [{description: "product 1"}, {description: "product 2"}];
        $scope.gridOptions = {
            data: "myData",
            multiSelect: true,
            selectedItems: $scope.mySelections
        }

        $scope.start = function() {
            // Even though the grid rows are selected, length is always zero. Dont know why
            $log.info($scope.mySelections.length);
        }
    });
/*added final () for self invoking*/
})();

Answer 2

使用以下内容解决了它：

$scope.$watchCollection("mySelections", function(newValue, oldValue){
                $log.info($scope.mySelections.length);
            });

我不确定这是否是正确的解决方法。 ~~但它现在完成了工作~~。等待对我的问题或处理此问题的不同方式的更好解释。感谢。

更新：这也没有帮助。在start（）函数中，$ scope.mySelections仍然显示为空。真奇怪。

Answer 3

正在使用此代码：

var mModule = angular.module('myApp', ['ngGrid']);
mModule.controller('listController', function($scope,$log) {
  $scope.myData = [{
    name: "Moroni",
    age: 50
  }, {
    name: "Tiancum",
    age: 43
  }, {
    name: "Jacob",
    age: 27
  }, {
    name: "Nephi",
    age: 29
  }, {
    name: "Enos",
    age: 34
  }];

  $scope.mySelections = [];
  $scope.gridOptions = {
    data: 'myData',
    multiSelect: true,
    selectedItems: $scope.mySelections
  };

  //setup some default selections
  $scope.$on('ngGridEventData', function() {
    $scope.gridOptions.selectRow(0, true);
    $scope.gridOptions.selectRow(2, true);
  });

  //count all selected rows
  $scope.start = function() {
    alert($scope.mySelections.length+' rows selected');
  };
});

不确定原因，因为它似乎是您问题中的确切代码（模块和控制器定义除外），但这非常有效。也许你不应该使用安全包装???

Look at this Plunker

Answer 4

只需从代码中删除它：

$scope.mySelections = [];

ng-grid无法从控制器内的selectedItems获取项目

4 个答案: