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

I've browsed similar questions for a couple hours, but haven't come up with anything that's an exact match. What I want to do is have a checkbox be automatically checked via data binding to a true/false value in my data. I can get the item names to load no problem, and I can even pull the checkbox values later on for saving to the server, but I can't get the initial values to load properly.

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

Here's a reduced example that shows the fundamental problem; HTML:

这是一个简化的例子，说明了根本的问题;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>

And here's the Javascript:

这里是Javascript:

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

Any idea why I can't get those checkboxes to respect the "true" and "false" values in the model? They always show unchecked whenever the page loads. Do I need to use ng-checked or a different directive?

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

3 个解决方案

#1

The problem is that you have "true" and "false" in quotes, which makes them strings instead of booleans that Angular can bind the checkbox to.

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

If you just remove the quotes as follows, your code then works correctly. A working example is at http://plnkr.co/edit/gkchmOBTkBtVv3TijlZW .

如果您像下面这样删除引号，那么您的代码就可以正常工作了。一个有效的例子是http://plnkr。有限公司/编辑/ gkchmOBTkBtVv3TijlZW。

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

#2

Depending on your data you may not want pure true/false in your code. AngularJS evaluates true/false and 1/0 booleans into strings anyway, so you may be better off using strings.

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

In this codepen I use "1" and "0" for boolean values, and ngTrueValue and ngFalseValue to tell AngularJS how to keep the bindings intact. Very simple and clean.

在这个代码页中，我使用“1”和“0”作为布尔值，使用ngTrueValue和ng谬误值告诉AngularJS如何保持绑定不变。非常简单和干净。

Codepen here: http://codepen.io/paulbhartzog/pen/kBhzn

Codepen:http://codepen.io/paulbhartzog/pen/kBhzn

Code snippet:

代码片段:

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

#3

I could only get ng-true-value working if I added the extra quotes like so (as shown in the official Angular docs - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D)

如果我添加了如下所示的额外引号(如官方的角文档所示——https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D)，我才能使ng-true-value发挥作用)

ng-true-value="'1'"

#1