我有一個複選框。AngularJS輸入檢查/取消選中2個功能
檢查 - >調用displayStuff();
取消選中 - >調用hideStuff();
我想類似的東西，但它不工作：
<input type="checkbox" id="mycheckbox" name="mycheckbox" ng-model="mycheckbox" data-ng-change="myCheckbox ? displayStuff() : hideStuff()" />
感謝您的幫助！
你可以嘗試這樣的事情。調用函數，並確定「mycheckbox」的值
function ctrl ($scope) {
function displayStuff(){
alert("display");
}
function hideStuff() {
alert("hide stuff");
}
$scope.checkClick = function(){
if($scope.mycheckbox== false)
hideStuff();
else
displayStuff();
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="" ng-controller="ctrl">
<input type="checkbox" id="mycheckbox" name="mycheckbox" ng-model="mycheckbox" data-ng-change="checkClick()" />
</body>但是，如果你正在做的是隱藏/顯示的東西，更好的方法是簡單地包裹你想要的元素與ng-show
所以像隱藏/顯示..
<div ng-show="mycheckbox==true">
</div>
這樣當複選框被點擊後，它會自動顯示div內的元素，當它未被選中時，它會隱藏它們。
您只是在輸入錯誤ng-model =「我的C heckbox」。
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.displayStuff = function() {
$scope.text = 'displayStuff';
};
$scope.hideStuff = function() {
$scope.text = 'hideStuff';
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" id="mycheckbox" name="mycheckbox" ng-model="myCheckbox" data-ng-change="myCheckbox ? displayStuff() : hideStuff()" />
<p>{{text}}</p>
</div>你也可以有一個切換功能取模型值作爲輸入。
var myApp = angular.module('myApp', []);
myApp.controller('stuffCtrl', function($scope){
$scope.data = "Stuff is displayed";
$scope.toggle = function(condition){
if (condition) {
//do stuff
$scope.data = "Stuff is displayed";
}
else $scope.data = "Stuff is hidden";
//do stuff
}
});<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="[email protected]*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0" data-require="[email protected]*"></script>
<script data-require="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<h1>Hello Angular</h1>
<div ng-controller="stuffCtrl">
<input type="checkbox" id="mycheckbox" name="mycheckbox" ng-model="mycheckbox" data-ng-change="toggle(mycheckbox)" ng-init="mycheckbox=true"> Display stuff
<div>{{ data }}</div>
</div>
</body>
</html>試試這個：看plunker
<input type="checkbox" id="mycheckbox2" name="mycheckbox1" ng-true-value="YES" ng-false-value="NO" ng-model="mycheckbox" ng-change="mycheckbox=='YES' ? displayStuff() : hideStuff()" />
HTML：
<input type="checkbox" ng-change="checked()" ng-model="mycheckbox" />
控制器：
$ scope.mycheckbox = false;
$scope.checked = function() {
if ($scope.mycheckbox)
$scope.hideStuff();
else
$scope.displayStuff();
}
$scope.displayStuff=function(){
alert("d");
$scope.mycheckbox=true;
}
$scope.hideStuff= function() {
alert("h");
$scope.mycheckbox=false;
}