複選框只更新模型後，第二次點擊

Question

請看看下面的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.."; 
     }); 
    }); 

Answer 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