我有一个复选框。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;
}