ng-grid無法從控制器內部的selectedItems中獲取項目

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');
  };
});

不知道為什么，因為這似乎是您所提問題的確切代碼（模塊和控制器定義除外），但效果很好。 也許您不應該使用安全包裝紙？？？

看看這個柱塞

Answer 4

只需從代碼中刪除它：

$scope.mySelections = [];