Question

我基本上希望当用户点击复选框时，他们的决定会立即反转并取消选中该复选框。以下代码无效。我尝试了其他变体，如value =！value而不是value = false，并尝试将另一个控制器变量初始化为等于checkbox变量并更改其他控制器变量。这些都不起作用;基本上，除非首次初始化应用程序，否则我无法设置复选框状态。

HTML code：

<input type="checkbox" ng-model="avariabledefinedincontroller" ng-click="changemystate(avariabledefinedincontroller)">

控制器代码：

$scope.avariabledefinedincontroller = false;


$scope.changemystate = function(value){
  if (value == true) {
    value = false;

 }

 else {
   value = value;
 }

};

Answer 1

传递到changemystate的值将是复选框点击时的值。因此，如果您希望它保持该值，您可以设置超时以将其恢复为该值。不需要否定。

此外，为value分配值将不会执行任何操作。您必须修改范围变量。如果要标识所单击项的范围变量，可以传入一个字符串：

＆＃13;

function MyController($scope, $timeout) {
  $scope.mybool = false;

  $scope.changemystate = function(key) {
     var value = $scope[key];
     $timeout(function () {
         $scope[key] = value;
     }, 0);
  };
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="" ng-controller="MyController">
  <input type="checkbox" ng-model="mybool" ng-click="changemystate('mybool')" />
  {{mybool}}
</div>

＆＃13;

Answer 2

实际上，你不需要这个功能：

在模板中：

<input type="checkbox" ng-model="avariabledefinedincontroller" />

在控制器中，您只有变量：

// Default state
$scope.avariabledefinedincontroller = false;

<强> Fiddle

修改：此问题的目的实际上是阻止用户选中复选框，但不禁用该复选框。为此，@ JLRishe的回答很好地解决了这个问题，不过我会亲自添加状态值来设置为setState的参数：

＆＃13;

angular.module('demoApp', []).controller('DemoController', function($scope, $timeout) {
  $scope.myVar = false;

  $scope.setState = function (varName, val) {
    $timeout(function() {
        $scope[varName] = val;  
    }, 0);
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<div ng-app="demoApp" ng-controller="DemoController">
  <input type="checkbox" ng-model="myVar" ng-click="setState('myVar', false)" />
  {{myVar}}
</div>

＆＃13;

Answer 3

您也可以使用简写：

<input type="checkbox" ng-model="avariabledefinedincontroller" ng-click="aVariable = !aVariable"/>

Answer 4

您可以选择多种选项，但为了防止有人帮助，我做了两件事。

我传递了$ event，以便我可以运行event.preventDefault（）（所以它不会被检查）
1. ng-click="changemystate($event, avariabledefinedincontroller)">
2. 在$ scope.changemystate（）中，我添加了事件参数，然后调用 event.preventDefault()
其次，我刚刚添加了return以便该方法终止，因此无需回滚该值，因为它会阻止它首先被更新。

如何反转复选框状态以使其取消选中（AngularJS）？

4 个答案: