2013-06-10 7 views

答えて

23

ng-true-value上のチェックボックスの値を取得したい

<tr ng-repeat="doc in providers">  
    <td><input type="checkbox" ng-true-value="{{doc.provider.Id}}" ng-false-value="" ng-model="ids"></td> 
</tr> 

{{ids}} 

は、文字列のみを受け入れ回避策を使用してください。これはしばらくの間feature requestでした。

は次のようにコントローラでidsオブジェクトを作成します:

$scope.ids = {}; 

と、そのオブジェクトにキーを参照するようにng-modelを変更する一方で、あなたはこれを行うことができます。そして、あなたはidsのキーの上にループがtrueをチェックすることができます

<td><input type="checkbox" ng-model="ids[doc.provider.Id]"></td> 

:デフォルトtrue/falseチェックボックスの値を使用することができます。

Here is a fiddle

+0

しないでください! :) 私は同様の問題を抱えていますが、ng-repeatで生成されたチェックボックスがあり、チェック入力の値を取得する方法がわかりません。ここでは全質問です[http://stackoverflow.com/questions/ 17487951/all-checkboxes-get-checked-one-is-is-be-be-just-one-checked] –

5

私は本当に角度でこれを行うためのオプションを好きではないと言って開始します。私はこれが受け入れられた答えより優れているとは言えませんが、データをモデルに保持しています。

マークアップ:それはコントローラに変更したとき

<tr ng-repeat='(index, doc) in provider'> 
    <td><input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' /></td> 
</tr> 

<span ng-repeat='id in ids'>{{id}} </span> 

今だけ$(オブジェクト平等パラメータを渡すことを確認してください)配列値とフィルタを見て:

$scope.ids = []; 

$scope.updateIds = function() { 
    $scope.ids = $scope.ids.filter(function(id) { 
     return !!id; 
    }); 
}; 

$scope.$watch('ids', $scope.updateIds, true); 

私は答える始めたときこの質問では、最も慣用的なオプションは、入力に変更指示を追加することだと思った:

<input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' ng-change='updateIds()'/> 

残念ながら、これは期待どおりに機能しません。値を削除すると、UIが正しく更新されません。私はまた、あなたが繰り返し指示なしにこれを行うことができますことを指摘したい。この場合

<input type='checkbox' ng-true-value='1' ng-model='ids.0' /> 
<input type='checkbox' ng-true-value='2' ng-model='ids.1' /> 
<input type='checkbox' ng-true-value='3' ng-model='ids.2' /> 
<input type='checkbox' ng-true-value='4' ng-model='ids.3' /> 
<input type='checkbox' ng-true-value='5' ng-model='ids.4' /> 
<input type='checkbox' ng-true-value='6' ng-model='ids.5' /> 

、$の時計は間違いなく、各入力にNG-変更を加えるよりも優れています。最後に、作業はplunkrです。 $ watch関数は、ボックスがチェックされるかチェックされなくなるたびに2回実行されますが、それは本当にどのようにする必要がありますか?

7

this directiveは、私が探していた機能を提供していました。私がより一般的な解決策で遭遇した主な問題は、マルチ選択リストと互換性のあるデータを格納するために必要な2つの配列があることです。 checklistModelディレクティブは、この非常に基本的な機能を提供し、複数のモデルで動作します。

関連する問題