Question

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

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

所以在这里，我使用ng-change基本上捕获了所有更改，它在两种情况下调用函数graphquery（检查和取消选中）

是否可以指定，条件，如果选中该复选框，它应该只调用此函数。

Answer 1

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

如果选中该复选框，则!key会解析为false，因此会执行graphQuery(key)。

如果取消选中该复选框，则!key会解析为true，因此忽略||之后的任何内容;

Answer 2

$scope.graphquery = function(key){
  if(!$scope[key]){
   //do nothing
   return;
  }

//do something
}

Answer 3

从文档中查看this example。

复选框上的

ngModel似乎是true或false，这是传递给您在ngChange中指定的函数的内容。如果要指定真值或伪值，可以使用ngTrueValue和ngFlaseValue指令。

请参阅此Plunk。

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

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

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

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

以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的值是true还是false，并且仅在值true时执行您的代码并且您可以在ng-true-value中指定一个函数，以便在true的情况下返回一个字符串。

Answer 4

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

仅在选中复选框时调用功能

4 个答案: