否定AngularJS中两种方式绑定的布尔值答案

【问题标题】：Negate boolean values of two way binding in AngularJS否定AngularJS中两种方式绑定的布尔值
【发布时间】：2016-12-19 06:49:14
【问题描述】：

我一直坚持使用否定布尔值，

参考以下代码

<label>Click me to toggle: <input type="checkbox" ng-model="!checked"></label><br/>

<button ng-model="button" ng-disabled="!checked">Button</button>

如果我使用上面的 [ngModel:nonassign] 错误抛出

如何为 ng-model 值绑定 negote 布尔表达式？

提前致谢

【问题讨论】：

How to disable an input box using angular.js的可能重复
可以加个代码sn-p吗？
删除!:ng-model="checked"。

标签： angularjs

【解决方案1】：

使用 AngularJS 1.3+，您可以使用 ng-true-value 和 ng-false-value。这将反转该值。

var app = angular
  .module('app', [])
  .controller('ctrl', function($scope) {
    $scope.checked = true;
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <label>
    Click me to toggle:
    <input type="checkbox" ng-model="checked" ng-true-value="false" ng-false-value="true">
  </label>
  <button ng-model="button" ng-disabled="!checked">Button</button>
</div>

【讨论】：

【解决方案2】：

尝试使用ng-disabled 标签而不是启用。您不能设置ng-model="!checked"，因为模型变量必须是变量，不能包含表达式。您可以为此调整ng-disabled 标签内的条件。请检查代码sn-p。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.bootcss.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">
        <label>Click me to toggle:
            <input type="checkbox" ng-model="checked">
        </label>
        <br/>

        <button ng-model="button" ng-disabled="checked">Button</button>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {

        });
    </script>

</body>

</html>

你可以找到ng-disabledhere和例子here的文档

【讨论】：

输入类型按钮接受协商值但复选框不能接受
为什么需要协商值？
如果我勾选或取消勾选，需要反向操作其他元素的行为
@MaheshP ng-disabled 使用单向绑定：表达式是只读的，用于添加或删除 disabled 属性。 ng-model 使用双向绑定：复选框的值被写入模型。 $scope.checked = newValue 可以，但 $scope.!checked = newValue 没有任何意义。
勾选或取消勾选复选框，模型值会自动更新，无需反转模型值。请检查我的代码 sn-p。当复选框被选中或取消选中时，它会自动更新禁用状态。