angular.js

Question

で動的なチェックボックスをバインド私はオプションのリストを持っているが、ここでは、サンプルコードですangular.js

で製品の選択に基づいて、JSONを介してデータベースから引き出さ：

<ion-checkbox ng-repeat="extra in extras" ng-model="order.extras" checklist-value="{{ extra.id }}"><strong>{{ extra.name }}</strong></ion-checkbox> 

は、私は、ユーザーが欲しいです複数のエキストラを選択することはできますが、これらの選択肢をバインドすることはできません。

Answer 1

ng-model="order.extras[extra.id]"と一緒に使えると思っています。確認済みの追加番号はorder.extrasで追跡できます。

以下のデモをご覧ください。jsfiddleです。

angular.module('demoApp', ['ionic']) 
 
\t .controller('mainController', mainController); 
 
    
 
function mainController($scope) { 
 
\t $scope.order = {}; 
 
\t $scope.extras = [ 
 
    \t { 
 
     id: 0, 
 
     name: 'first' 
 
     }, 
 
     { 
 
     id: 1, 
 
     name: 'second' 
 
     }, 
 
     { 
 
     id: 2, 
 
     name: 'third' 
 
     } 
 
    ] 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/css/ionic.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic-angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic.bundle.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController"> 
 
<ion-content> 
 
    <ion-checkbox ng-repeat="extra in extras" ng-model="order.extras[extra.id]" checklist-value="{{ extra.id }}"><strong>{{ extra.name }}</strong></ion-checkbox> 
 
    
 
current order: {{order}} 
 
    
 
</ion-content> 
 
</div>