如何讓複選框在我的數據模型中綁定到布爾值？

我瀏覽過類似的問題幾個小時，但沒有拿出任何完全匹配的東西。我想要做的是有一個複選框通過數據綁定自動檢查數據中的真/假值。我可以獲取項目名稱來加載沒有問題，我甚至可以稍後將複選框值保存到服務器，但我無法獲得正確加載的初始值。如何讓複選框在我的數據模型中綁定到布爾值？

下面是一個簡化的例子，顯示了基本問題; 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>

而這裏的Java腳本：

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

任何想法，爲什麼我不能讓這些複選框尊重模型中的「真」與「假」的價值觀？當頁面加載時，它們始終顯示未選中狀態。我是否需要使用ng檢查或不同的指令？

來源

2013-04-27 paradigm72

問題在於引號中有「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-27 18:22:57 mikel

但是，這不適用於單選按鈕你知道如何做單選按鈕 – Xvegas 2015-05-14 21:11:54

根據您的數據，您可能不希望在代碼中使用純正/錯誤。 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-20 20:04:57

我只能得到NG-真值，如果我添加了額外的引號，像這樣（如圖官方角文檔工作 - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D ）

ng-true-value="'1'"

來源

2015-04-07 10:56:34 JRT

如何讓複選框在我的數據模型中綁定到布爾值？

回答

相關問題