复选框仅在第二次单击后更新模型答案

【问题标题】：Checkbox only updates model after second click复选框仅在第二次单击后更新模型
【发布时间】：2016-04-14 19:33:16
【问题描述】：

请看以下Plunkr：http://plnkr.co/edit/hwVL3xtnD9hGJLpULDjI?p=preview

当您第一次单击复选框时，模型不会更新。为什么会这样？

var app = angular.module('main', ['ngMaterial'])
    .controller('DemoCtrl', function($scope, $filter, $http) {
      $scope.propdata = [];
      $scope.success ="loading..";
      var url = "api.json";
       $http({url:url,
         method:"GET"
       }).then(function (rs){
         $scope.propdata = rs.data[0];
         $scope.success ="done..";
       });
    });

【问题讨论】：

标签： javascript angularjs checkbox

【解决方案1】：

您返回的 json 具有 1 值，而不是 true 或 false。如果您将数据更改为true 或false，它将识别初始值。另一种选择是将“1”转换为布尔值，然后分配它。

编辑：

另一个选项是在您的复选框上设置ng-true-value 和ng-false-value，以便它识别您正在使用的0 和1 值。注意双引号“'1'”后面的简单引号以识别字符串。此处示例：

HTML

<div class="checkbox {{font_size}}">
     <label for="garden_service">
          <input type="checkbox" id="garden_service"
                      ng-checked="propdata.garden_service==1" ng-true-value="'1'" ng-false-value="'0'"
                       ng-model="propdata.garden_service">Garden Service <br/>model value:{{propdata.garden_service}}
     </label>
</div>

http://plnkr.co/edit/t280UjC3NYNtQt28W1wm?p=preview

官方文档链接：https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

【讨论】：

非常感谢！不知道双引号中的单引号。