0

複数選択ドロップダウンを作成しようとしています。

ディレクティブを使用して、ng-options基本的に 2 つのデータセットを比較し、一致するオプションを に設定できることがわかりましたselected

私が持っている2つのコレクションは次のとおりです。

// Full list of possible recipients and the different types

reference = {
  "AddressBook": [
    {
      "ID": 1,
      "FullName": "Angela Williams",
      "IsActive": true,
      "SendType": null,
      "Email": "awilliams@yamia.com"
    },
    {
      "ID": 2,
      "FullName": "Jerry Schmidt",
      "IsActive": true,
      "SendType": null,
      "Email": "jschmidt@cogibox.mil"
    },
    {
      "ID": 3,
      "FullName": "Judy Olson",
      "IsActive": true,
      "SendType": null,
      "Email": "jolson@buzzdog.gov"
    },
    {
      "ID": 4,
      "FullName": "Sara Griffin",
      "IsActive": true,
      "SendType": null,
      "Email": "sgriffin@yoveo.org"
    }
  ],
  "SendTypes": [
    {
      "ID": 1,
      "Value": "To"
    },
    {
      "ID": 2,
      "Value": "CC"
    },
    {
      "ID": 3,
      "Value": "BCC"
    }
  ]
}

// Selected recipients

currentNotification.TO = [
  {
    "Email": "awilliams@yamia.com",
    "FullName": "Angela Williams",
    "ID": 1, 
    "IsActive": true,
    "SendType": "To"
  },
  {
    "Email": "sgriffin@yoveo.org",
    "FullName": "Sara Griffin",
    "ID": 4, 
    "IsActive": true,
    "SendType": "To"
  }
]

マークアップに使用しようとしたもの:

<div class="form-group" ng-repeat="sendType in reference.SendTypes">
  <label for="">{{sendType.Value}}:</label>
  <select class="form-control" name="" id="recipients{{sendType}}" ng-multiple="true" multiple ng-model="currentNotification[(sendType.Value).toUpperCase()]" ng-options="recipient.FullName for recipient in reference.AddressBook | orderBy: 'FullName'"></select>
</div>

そのマークアップを使用すると、SendType (To、CC、BCC) ごとに .form-group が作成されます。それぞれに、適切なラベル (sendType.Value) が表示されています。複数選択が表示され、AddressBook のエントリごとにオプションが繰り返されます。また、正しくソートされます。残念ながら何も選択されていません。

について少し調べてng-optionsみると、私のselectedコレクションは、オブジェクトの配列ではなく、文字列の配列である必要があるようです。本当?

奇妙なことに、受信者を手動で選択すると、モデルは次のように更新されます。

BCC = [
  { ... },
  { ... },
  { ... },
  { 
    "ID": 3,
    "FullName": "Judy Olson",
    "IsActive": true,
    "SendType": null,
    "Email": "jolson@buzzdog.gov"
  }
]

これについて何か助けていただければ幸いです。現在、締め切りに遅れています。誰かフィドルか何かが欲しいなら、私に知らせてください。再度、感謝します!

4

0 に答える 0