16

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

这是一个显示基本问题的简化示例；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"
      }
   ];
};

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

4

3 回答 3

18

问题是引号中有“true”和“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
      }
   ];
};
于 2013-04-27T18:22:57.603 回答
7

根据您的数据，您可能不希望代码中出现纯真/假。AngularJS 无论如何都会将 true/false 和 1/0 布尔值评估为字符串，因此使用字符串可能会更好。

在这个 codepen 中，我使用“1”和“0”作为布尔值，使用 ngTrueValue 和 ngFalseValue 来告诉 AngularJS 如何保持绑定的完整性。非常简单干净。

Codepen 在这里： 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>
于 2014-05-20T20:04:57.437 回答
7

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

ng-true-value="'1'"
于 2015-04-07T10:56:34.140 回答