Fatal编程技术网
  • javascript/
  • Javascript ng不调用函数的更改

Javascript ng不调用函数的更改

javascript angularjs

Javascript ng不调用函数的更改,javascript,angularjs,angularjs-ng-change,Javascript,Angularjs,Angularjs Ng Change,我的ng表是这样构建的 <table ng-table="storeCommandsTableParams" class="table tile"> <tr ng-repeat="storeCommand in $data"> <td> <input type="c

我的ng表是这样构建的

                    <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>
我试图实现的是，当任何用户单击复选框时，应将相应的storeCommand发送到函数vm.toggleCommandSelection，以便我可以选择storeCommand列表。但是这个函数没有被激发

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

试试这个


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




var vm=这个；
vm.selectedCommands=[]；
vm.toggleCommandSelection=函数（$event，storeCommand）{
var idx=vm.selectedCommands.indexOf（storeCommand）；
if（$event.target.checked）{
如果（idx==-1）{
vm.selectedCommands.push（storeCommand）；
} 
}
否则{
如果（idx>-1）{
vm.selectedCommands.splice（idx，1）；
} 
}
};


演示

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

试试这个


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




var vm=这个；
vm.selectedCommands=[]；
vm.toggleCommandSelection=函数（$event，storeCommand）{
var idx=vm.selectedCommands.indexOf（storeCommand）；
if（$event.target.checked）{
如果（idx==-1）{
vm.selectedCommands.push（storeCommand）；
} 
}
否则{
如果（idx>-1）{
vm.selectedCommands.splice（idx，1）；
} 
}
};


演示

问题尚未解决，但我建议您使用$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>



嗨，据我所知，我已经用虚拟数据更新了我的答案。另外，请在此处找到plunker的工作链接
问题尚未解决，但我建议您使用$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>



嗨，据我所知，我已经用虚拟数据更新了我的答案。另外，请在此处找到plunker的工作链接
我将其更改为不工作尝试单击不工作。如果只是一个按钮，同样的事情也会发生。当你使用
ng点击
时，你必须改变你的逻辑。同样的结果。它适用于一个简单的按钮，但不适用于复选框。几分钟后设置它，我将其更改为“不工作”尝试单击“不工作”。如果只是一个按钮，同样的事情也会发生。当你使用
ng点击
时，你必须改变你的逻辑。同样的结果。它适用于一个简单的按钮，但不适用于复选框。几分钟后设置它，我将其更改为“不工作”尝试单击“不工作”。如果只是一个按钮，同样的事情也会发生。当你使用
ng点击
时，你必须改变你的逻辑。同样的结果。它适用于一个简单的按钮，但不适用于复选框。在几分钟内设置它看起来像
vm.storeCommandsTableParams
那么它将是
ng table=“vm.storeCommandsTableParams”
表参数声明如下$scope.storeCommandsTableParams=new ngTableParams({page:1，//显示第一页计数：10，//每页计数筛选器延迟：7000，排序：{name:'asc'}}它们似乎工作正常。您只需将observer添加到模型中，这样您就不需要进行ng更改。看起来像
vm.storeCommandsTableParams
那么它将是
ng table=“vm.storeCommandsTableParams”
表参数声明如下$scope.storeCommandsTableParams=new ngTableParams({page:1，//显示第一页计数：10，//每页计数筛选器延迟：7000，排序：{name:'asc'}}它们似乎工作正常。您只需将observer添加到模型中，这样您就不需要进行ng更改。看起来像
vm.storeCommandsTableParams
那么它将是
ng table=“vm.storeCommandsTableParams”
表参数声明如下$scope.storeCommandsTableParams=new ngTableParams({page:1，//显示第一页计数：10，//每页计数筛选器延迟：7000，排序：{name:'asc'}}它们似乎工作得很好。你只需将observer添加到模型中，这样你就不需要进行ng更改。他使用的是controllerAs语法。这在技术上是正确的。在那里使用
$scope
的原因是什么？@pankajparkar没有什么问题。我已经用$scope解释过了。）我已经试过了。它不起作用。我可以看到与控制器的连接很好，因为一切正常（函数被调用）当我使用一个按钮，但当我使用一个复选框时，它不会。嗨，Ras和@pankajparkar，我已经更新了我的答案，还为中继器控件中的复选框添加了一个带有虚拟数据的plunker。请检查一下，让我知道是否有任何问题。如果你喜欢，请投赞成票。感谢她使用的是controllerAs语法。这在技术上是错误的ght..在那里使用
$scope
的原因是什么？@pankajparkar没有问题。我已经用$scope解释过了。：）我已经试过了。它不起作用。我可以看到与控制器的连接很好，因为一切都正常（函数被调用）当我使用一个按钮，但当我使用一个复选框时，它不会。嗨，Ras和@pankajparkar，我已经更新了我的答案，还为中继器控件中的复选框添加了一个带有虚拟数据的plunker。请检查一下，让我知道是否有任何问题。如果你喜欢，请投赞成票。感谢她使用的是controllerAs语法。这在技术上是错误的ght..在那里使用
$scope
的原因是什么？@pankaj