2013-04-27 13 views
16

私は数時間同様の質問を閲覧しましたが、完全に一致するものは見つかっていません。私がしたいのは、自分のデータの真偽値へのデータバインディングを介してチェックボックスを自動的にチェックすることです。アイテム名を取得しても問題はありません。チェックボックスの値を後でサーバーに保存することもできますが、初期値を正しく読み込むことができません。データモデル内のブール値にバインドするチェックボックスを取得するにはどうすればよいですか?

ここには根本的な問題を示す縮小例があります。 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" 
     } 
    ]; 
}; 

私はそれらのチェックボックスをモデルに「真」と「偽」の値を尊重するために得ることができない理由を任意のアイデア?ページが読み込まれるたびに常にチェックが外されます。 ng-checkedまたは別のディレクティブを使用する必要がありますか?

答えて

17

"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 
     } 
    ]; 
}; 
+0

これはラジオボタンでは機能しませんが、ラジオボタンの操作方法は分かりますか – Xvegas

7

データによっては、コードに純粋な真偽が必要な場合があります。 AngularJSはtrue/falseと1/0ブール値を文字列に評価しますので、文字列を使用するほうがよいでしょう。

私はブール値に "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> 
関連する問題