AngularJS输入检查/取消检查有2个功能

AngularJS input check/uncheck with 2 functions

本文关键字：检查 2个 功能 输入 AngularJS 取消      更新时间：2023-09-26

我有一个复选框。

检查->调用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="myC复选框"中有一个拼写错误。

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>

试试这个：参见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()" />

您还可以有一个将模型值作为输入的切换函数。

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="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script data-require="bootstrap@*" 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="angular.js@*"></script>
    <script data-require="jquery@*" 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>

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;
    }
相关文章：