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

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

javascript angularjs

Javascript 如何使复选框绑定到数据模型中的布尔值？,javascript,angularjs,Javascript,Angularjs,我已经浏览了几个小时类似的问题，但没有找到完全匹配的答案。我想做的是通过数据绑定到我的数据中的真/假值来自动选中复选框。我可以毫无问题地获取要加载的项目名称，我甚至可以稍后拉取复选框值以保存到服务器，但无法正确加载初始值下面是一个简化的示例，它显示了基本问题；HTML: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <scri

我已经浏览了几个小时类似的问题，但没有找到完全匹配的答案。我想做的是通过数据绑定到我的数据中的真/假值来自动选中复选框。我可以毫无问题地获取要加载的项目名称，我甚至可以稍后拉取复选框值以保存到服务器，但无法正确加载初始值

下面是一个简化的示例，它显示了基本问题；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>

知道为什么我不能让这些复选框尊重模型中的“真”和“假”值吗？每当页面加载时，它们总是显示为未选中状态。我需要使用ng checked或其他指令吗？

问题是引号中有“true”和“false”，这使它们成为字符串，而不是可以绑定复选框的布尔值

如果您只是按如下方式删除引号，那么您的代码就可以正常工作。一个有效的例子是

根据您的数据，您可能不希望代码中出现纯true/false。AngularJS将真/假和1/0布尔值计算为字符串，因此您最好使用字符串

在这个代码笔中，我使用“1”和“0”表示布尔值，使用ngTrueValue和ngFalseValue告诉AngularJS如何保持绑定完整。非常简单和干净

代码笔在这里：

代码段：

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


{{item.id}单击此按钮可更改下面的数据值

{{list1 | json}}

如果我像这样添加额外的引号（如官方文档中所示），我只能获得ng真值

但这对单选按钮不起作用你知道如何对单选按钮起作用吗

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

<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="'1'"