APIからのIonic/AngularJSチェックボックスとng-repeat

Question

モバイルからAPIへの実際のチェックボックス値をAPIに送信して、選択された調味料で注文することができましたが、それを把握することはできません。調味料はHTTP GET呼び出しからAPIに返されます。

<ion-checkbox ng-repeat="condiment in condiments" ng-model="condiment.checked" 
          ng-checked="checkItem(condiment.id)"> 
       {{condiment.name}} 
       {{condiment.price}} 
</ion-checkbox> 

これは、関数を呼び出します。

$scope.checkItem = function (id) { 
      return $scope.condiments[id-1].checked = true; 
}; 

（IDは1から始まり、0の配列のでマイナス1である） しかし、チェックされている場合、それは未チェック/と呼ばれるのではなく、それがすべてになり私のリソースはデフォルトでチェックされ、一度クリックするとチェックが外されますが、何も変わりません。

プロパティ 'checked'は、調味料の元のJSON API出力の一部ではありません。 ID、名前、価格があります。

質問：

がサーバに確認IDの背中を送信するために苦痛が少ない方法はありますか？

編集：

私は前にデフォルトの変数を設定しようとしましたが、それは何もしません：

for(var i=0; i<$scope.condiments; i++){ 
      $scope.condiments[i].checked = false; 
} 

Answer 1

私はまた、私はこのように使用してこれを解決するこの種の問題、 に直面し、

<input type="checkbox" ng-model="condiment.checked" ng-true-value="1" ng-false-value="0" ng-checked="condiment.checked == 1"> 

これは、jsonで直接確認されたTrueを変更します。単純にあなたのAPI "condiments"をコンソールにしてください。あなたの答えを得るでしょう。

そして、もしあなたがデフォルトでチェックしたいならば、偽です。単にng-init="condiment.checked=0"を使ってください。だから、もしそれをチェックすれば、それはTrueを返します。そうでなければ、Falseになります。

Answer 2

チェックリストモデルは、チェックボックスhttps://docs.angularjs.org/api/ng/directive/ngChecked上の角度のドキュメントを通じて、このリンクChecklist-model

Answer 3

あなたが行くことができて行ってください、ここで使用することができます。それは明らかにng-modelとng-checkedを使用しないように指示しますが、予期しない結果につながる可能性があります。

あなたは...

<ion-checkbox ng-repeat="condiment in condiments" ng-model="condiment.checked"> 
      {{condiment.name}} 
      {{condiment.price}} 
</ion-checkbox> 

をng-checkedを削除することができますし、コントローラにあなたは調味料のIDの

$scope.checkItems = function(){ 
    var CID = []; 
    angular.forEach($scope.condiments,function(condiment){ 
     if(condiment.checked){ 
      CID.push(condiment.id); 
     } 
    }); 

    //send CID to server 
}; 

Answer 4

はこれを試す得ることができ、ここであなたのために作成フィドルです。ここsee this

 <div ng-app="myApp"> 
      <div ng-controller="MyCtrl"> 
       <div ng-repeat="(key,val) in condiments"> 
        <input type="checkbox" ng-model="selected[val.id]" ng-click="checked(key,selected[val.id])" ng-true-value="true" ng-false-value="false">{{val.name}} 
       </div> 
       <br> 
       <br> 
       <div>added status into main array 
        <br>{{condiments}}</div> 
      </div> 
     </div> 

素晴らしい作品コントローラとロジック

var myApp = angular.module('myApp', []); 

    function MyCtrl($scope) { 
     $scope.selected = {}; 
     $scope.condiments = [{ id: 1, name: "item1", price: 100 }, { id: 2, name: "item2", price: 200 }, { id: 3, name: "item3", price: 300 }]; 
     angular.forEach($scope.condiments, function(val, index) { 
      $scope.selected[val.id] = "true"; 
      $scope.condiments[index].checked = true; 
     }) 
     $scope.checked = function(key, status) { 
      if (status == "true") { 
       $scope.condiments[key].checked = true; 
      } else { 
       $scope.condiments[key].checked = false; 
      } 
     } 
    }