1

$resource私は、ある通話から顧客データを取得し、別の通話からいくつかの一般的な設定データを取得する SPA に取り組んでい$resourceます。

設定データは配列として送信され、次のように一連のチェックボックスを設定するために使用します。

<div ng-repeat="pref in fieldMappings.mealPrefs">
  <input type="checkbox"
          id="pref_{{$index}}"
          ng-model="customer.mealPrefs"
          ng-true-value="{{pref.name}}" />
  <label class="checkbox-label">{{pref.name}}</label>
</div>

ユーザーが 1 つ以上のチェックボックスをクリックすると、そのチェックボックスの配列で表される値が、次のように顧客オブジェクト内にネストされた配列にマップされるようにします。

.controller( 'AppCtrl', function ( $scope, titleService, AccountDataService ) {

  // this is actually loaded via $resource call in real app
  $scope.customer = {
    "name": "Bob",
    "mealPrefs":["1", "3"]
  };

  // this is actually loaded via $resource call in real app    
  $scope.fieldMappings.mealPrefs = [
      {'id':"1", 'name':"Meat"},
      {'id':"2", 'name':"Veggies"},
      {'id':"3", 'name':"Fruit"},
      {'id':"4", 'name':"None"}
  ];
});

ng-click私は、顧客オブジェクト モデルの正しい部分を埋めるロジックを手動で処理し、同じことを行うために、コントローラーの機能を開始するイベントを設定しようとしまし$watchesた。私はそこである程度の成功を収めましたが、何らかの方法で処理する必要がある約2ダースの異なるチェックボックスグループがあり（実際のSPAは巨大です）、重複することなく、非常にクリーンで繰り返し可能な方法でこの機能を実装したいと考えています.多くのクリック ハンドラーと$watches値の一時的な配列の多くを設定します。コミュニティの誰かが、かなり「ベストプラクティス」であると感じる方法でこれを解決しましたか?

これが繰り返しである場合は申し訳ありません-角度のあるチェックボックスの周りに約12以上のSO回答を見てきましたが、あるオブジェクトモデルから値を取得して別のオブジェクトモデルに詰め込んでいるものが見つかりませんでした。どんな助けでも大歓迎です。

余談ですが、私は plunkr を初めて使用します ( http://plnkr.co/edit/xDjkY3i0pI010Em0Fi1L?p=preview ) - 人々が私の質問に簡単に答えられるように例を設定しようとしましたが、できます。それを機能させます。誰かがそれについて検討したい場合は、2 番目の質問を設定し、その回答も受け入れます! :)

4

2 に答える 2

1

これは、私がまとめた JSFiddle で、あなたが何をしたいのかを示しています。http://jsfiddle.net/zargyle/t7kr8/

It uses a directive, and a copy of the object to display if changes were made.
于 2013-09-13T21:49:39.300 に答える
0

チェックボックスにディレクティブを使用します。ディレクティブから customer.mealPrefs を設定できます。チェックボックス ディレクティブのリンク関数で、「変更」イベントにバインドし、顧客の食事プレフ配列を反復処理し、変更されているチェックボックスの ID を追加または削除する関数を呼び出します。

私はあなたのコードを取り、この例を書きました: http://plnkr.co/edit/nV4fQq?p=preview

于 2013-09-13T21:15:17.540 に答える