Javascript 仅当选中复选框时调用函数_Javascript_Angularjs

Javascript 仅当选中复选框时调用函数

javascript angularjs

Javascript 仅当选中复选框时调用函数,javascript,angularjs,Javascript,Angularjs,我是angular.js的新手，我试图创建一个带有复选框的html列表，所以我试图实现的是在用户选中复选框时调用javascript函数 <input id='box' ng-model='" + key + "' ng-change='graphquery(\"" + key + "\")' class = 'queryNameList css-checkbox' type = 'checkbox' /> 所以在这里，我使用了ng change，它基本上捕获了所有的更改，它

我是angular.js的新手，我试图创建一个带有复选框的html列表，所以我试图实现的是在用户选中复选框时调用javascript函数

<input id='box' ng-model='" + key + "'  ng-change='graphquery(\"" + key + "\")' class = 'queryNameList css-checkbox' type = 'checkbox' />

所以在这里，我使用了

ng change

，它基本上捕获了所有的更改，它在两种情况下都调用函数

graphquery

（选中和取消选中）

是否可以指定、条件，如仅当选中复选框时才调用此函数。

从文档中进行检查

document.getElementById('box').addEventListener('change', function(){ 
if(this.checked === true) runMyFunction();
});

复选框上的ngModel似乎是

true

或

false

，这就是传递给您在

ngChange

中指定的函数的内容。如果要指定真值或假值，可以使用

ngTrueValue

和

ngFlaseValue

指令

看这个

和HTML格式

<body ng-controller="MainCtrl">
    <input id='box' ng-model='key' ng-change='graphQuery()' class='queryNameList css-checkbox'
       type='checkbox' ng-true-value="{{returnKey()}}" />

    <pre>Key: {{key}}</pre>
</body>


密钥：{{Key}}

因此，您要做的是检查

键

的值是否为

真

或

假

，并且仅在值为

真

时执行代码，并且您可以在

ng真值

中指定一个函数，以在

真

的情况下返回字符串

如果选中该复选框，则

！键

解析为

false

，因此执行

图形查询（键）

如果复选框未选中，则

！键

解析为

true

，因此

之后的任何内容都将被忽略

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

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

    $scope.graphQuery = function(key) {
      if (key)
        $scope.key = key
    }

    $scope.returnKey = function() {
      return '123'
    }
  }
)

<body ng-controller="MainCtrl">
    <input id='box' ng-model='key' ng-change='graphQuery()' class='queryNameList css-checkbox'
       type='checkbox' ng-true-value="{{returnKey()}}" />

    <pre>Key: {{key}}</pre>
</body>

ng-change="!key || graphQuery(key)"