Question

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

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

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

Answer 1

问题在于引号中有“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
      }
   ];
};

Answer 2

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

在这个codepen中，我使用＆＃34; 1＆＃34;和＆＃34; 0＆＃34;对于布尔值，以及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>

Answer 3

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

ng-true-value="'1'"

如何在我的数据模型中获取绑定到布尔值的复选框？

3 个答案: