如何反转复选框状态以使其未选中 (AngularJS)？

Question

我基本上希望当用户点击一个复选框时，他们的决定立即被撤销并且复选框被取消选中。下面的代码不起作用。我尝试了其他变体，例如 value = !value 而不是 value = false，并尝试将另一个控制器变量初始化为等于复选框变量并更改另一个控制器变量。 None 本作品；基本上，除非首先初始化应用程序，否则我无法设置复选框状态。

HTML代码：

<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 赋值也没有任何作用。您必须修改范围变量。如果你想识别被点击的项目的范围变量，你可以传入一个字符串：

function MyController($scope, $timeout) {
  $scope.mybool = false;

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

<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>

Answer 2

实际上，您不需要一个函数：

在模板中：

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

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

// Default state
$scope.avariabledefinedincontroller = false;

Fiddle

编辑：这个问题的目的实际上是防止用户选中复选框，但不禁用复选框。为此，@JLRishe 的回答很好地解决了这个问题，尽管我个人会添加状态值以设置为 setState 的参数：

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

  $scope.setState = function (varName, val) {
    $timeout(function() {
        $scope[varName] = val;  
    }, 0);
  }
});

<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>

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)？

How do I reverse a checkbox state to make it unchecked (AngularJS)?

checkbox

angularjs

angularjs-ng-click

angularjs-ng-change