如何使复选框绑定到数据模型中的布尔值

How do I get checkboxes to bind to boolean values in my data model?

本文关键字：布尔值 数据模型 何使 复选框 绑定      更新时间：2023-09-26

我已经浏览了几个小时类似的问题，但还没有找到任何完全匹配的问题。我想做的是有一个复选框通过数据绑定到一个真/假值在我的数据自动检查。我可以让项目名称加载，没有问题，我甚至可以拉出复选框的值保存到服务器，但我不能让初始值正确加载。

这是一个简化的例子，显示了基本问题;HTML: 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="shoppingListNg.js"></script>
<body ng-app>
<div ng-controller="ShoppingListCtrl">
    <table>
        <tr ng-repeat="item in shoppingList">
            <td>
                <div>{{item.text}}</div>
            </td>
            <td>
                <input type="checkbox" ng-model="item.isGotten" />
            </td>
        </tr>
    </table>
</div>
</body>

这里是Javascript:

function ShoppingListCtrl($scope) {
    $scope.shoppingList = [
      {
      "text": "V8 fusion",
      "isGotten": "true"
      }, 
      {
      "text": "Whole milk container",
      "isGotten": "false"
      },
      {
      "text": "Protein bars",
      "isGotten": "true"
      }
   ];
};

知道为什么我不能让这些复选框尊重模型中的"真"answers"假"值吗?每当页面加载时，它们总是显示未选中。我需要使用ng-checked或不同的指令吗?

问题是你的"true"answers"false"都用引号括起来了，这使得它们变成了字符串，而不是布尔值，Angular可以将复选框绑定到它们。

如果你像下面那样去掉引号，你的代码就可以正常工作了。一个可行的例子在http://plnkr.co/edit/gkchmOBTkBtVv3TijlZW。

function ShoppingListCtrl($scope) {
    $scope.shoppingList = [
      {
      "text": "V8 fusion",
      "isGotten": true
      }, 
      {
      "text": "Whole milk container",
      "isGotten": false
      },
      {
      "text": "Protein bars",
      "isGotten": true
      }
   ];
};

根据您的数据，您可能不希望在代码中使用纯true/false。AngularJS将true/false和1/0布尔值计算为字符串，所以你最好使用字符串。

在这个代码中，我使用"1"answers"0"来表示布尔值，并使用ngTrueValue和ng谬误值来告诉AngularJS如何保持绑定的完整性。非常简单和干净。

参考此处:http://codepen.io/paulbhartzog/pen/kBhzn

代码片段:

<p ng-repeat="item in list1" class="item" id="{{item.id}}">
  <strong>{{item.id}}</strong> <input name='obj1_data' type="checkbox" ng-model="list1[$index].data" ng-true-value="1" ng-false-value="0"> Click this to change data value below
</p>
<pre>{{list1 | json}}</pre>

我只能让ng-true-value工作，如果我添加额外的引号像这样(如官方的Angular文档- https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D所示)

ng-true-value="'1'"
相关文章：