Question

我的ng-table正在构建如下

                    <table ng-table="storeCommandsTableParams" class="table tile">
                    <tr ng-repeat="storeCommand in $data">
                        <td>
                                <input type="checkbox" ng-change="vm.toggleCommandSelection(storeCommand)"  ng-model="vm.selectedCommands" >
                        </td>
                    </tr>
                </table>

我有这样的控制器设置。

    var vm = this;          
    vm.selectedCommands = { };
    vm.toggleCommandSelection = function (storeCommand) {
        var idx = vm.selectedCommands.indexOf(storeCommand);
        // is currently selected
        if (idx > -1) {
            vm.selectedCommands.splice(idx, 1);
        }
            // is newly selected
        else {
            vm.selectedCommands.push(storeCommand);
        }
    };

我想要完成的是，当用户点击一个复选框时，应该将相应的storeCommand发送到函数vm.toggleCommandSelection，以便我可以选择storeCommands列表。但是这个功能没有被解雇。

Plunker

Answer 1

您的模型不是storeCommand，而是vm.selectedCommands。因此，当您单击复选框时，在这种情况下不会触发ng-change。可能您可以使用ng-click代替。

试试这个

<input type="checkbox" ng-click="vm.toggleCommandSelection($event, storeCommand)">

    var vm = this;          
    vm.selectedCommands = [];
    vm.toggleCommandSelection = function ($event, storeCommand) {
        var idx = vm.selectedCommands.indexOf(storeCommand);
        if ($event.target.checked) {
            if (idx === -1) {
               vm.selectedCommands.push(storeCommand);
            } 
        }
        else {
            if (idx > -1) {
              vm.selectedCommands.splice(idx, 1);
            } 
        }
    };

<强>演示 http://plnkr.co/edit/kcW7YCWsXE8mtZoxjm1J?p=preview

Answer 2

问题未清除，但我建议您使用$ scope。在这里，我假设控制器中的所有数据都是$ scope.data

从最后的HTML开始：

      <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
       <table ng-table="storeCommandsTableParams" class="table tile">
                    <tr ng-repeat="category in categories">
                        <td>
                            <label class="checkbox" for="{{category.id}}">
                               <input type="checkbox" ng-model="selection.ids[category.id]" name="group" id="{{category.id}}" / >
                                {{category.name}}  
                        </td>
                    </tr>
           <pre ng-bind="selection.ids | json"></pre> 
       </table>
  </body>

</html>

在相应控制器的脚本中，写一下：

   var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

    $scope.categories = [ { "name": "Sport", "id": "50d5ad" } , {"name": "General", "id": "678ffr" } ];
      $scope.selection = {

    };

});

嗨，据我所知，我用虚拟数据更新了我的答案。另请在此处找到plunker的工作链接PLUNKER

ng-change没有调用函数

2 个答案: