只有當檢查複選框時調用函數

我是angular.js的新手，我試圖創建一個帶有複選框的html列表，所以我試圖實現的是調用一個javascript函數，當用戶選中一個複選框。只有當檢查複選框時調用函數

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

所以在這裏，我已經使用ng-change基本上捕獲所有的變化，它在這兩種情況下調用函數（檢查和取消選中）

是否可以規定，條件，像它應該只調用此功能，如果複選框被選中。

來源

2014-01-12 user1371896

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

//do something 
}

來源

2014-01-12 10:48:56

-4

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

來源

2014-01-12 10:45:53

檢查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的情況下返回一個字符串。

來源

2014-01-12 10:59:51

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

如果該複選框被選中，那麼!key解析爲false，所以graphQuery(key)被執行。

如果該複選框的勾選，那麼!key解析爲true，所以||後都被忽略;

來源

2014-01-12 11:26:52 zeroflagL

回答

相關問題