19

私はこのコードを持っています:

<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}}

配列のチェックボックスの値を取得したい

4

3 に答える 3

25

ng-true-value文字列のみを受け入れるため、回避策を使用する必要があります。これは、しばらくの間、機能のリクエストでした。それまでの間、これを行うことができます：

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

$scope.ids = {};

ng-modelそのオブジェクトのキーを参照するように変更します。デフォルトのtrue/falseチェックボックス値を使用できます。

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

ids次に、をチェックしてキーをループできますtrue。

ここにフィドルがあります

于 2013-06-10T19:06:21.637 に答える
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>

ここで、配列値を $watch し、コントローラーで変更されたときにフィルター処理します (必ずオブジェクトの等価パラメーターを渡すようにしてください)。

$scope.ids = [];

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

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

この質問に答え始めたとき、最も慣用的なオプションは、入力に ng-change ディレクティブを追加することだと思いました。

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

残念ながら、これは期待どおりに機能しません。値を削除すると、UI が正しく更新されません。また、repeat ディレクティブなしでこれを実行できることも指摘しておきます。

<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' />

この場合、 $watch は、各入力に ng-change を追加するよりも確実に優れています。最後に、これが動作するplunkrです。$watch 関数は、ボックスがオンまたはオフになるたびに 2 回実行されることになりますが、実際にはそうあるべきです!

于 2014-01-16T21:51:46.487 に答える