問題タブ [angularjs-ng-options]

スコープにオブジェクト配列があり、以下のようにドロップダウン コントロールにリストします。

また、selectedItem をオブジェクトとして取得して、オブジェクトの他の属性にアクセスし、ページのコンテンツを操作できるようにしたいと考えています。例えば;

誰でもこれで私を助けることができますか？ありがとうございました。

Angular (1.1.5) がこのグループ化された選択ドロップダウンで正しい値を適切に選択していないというのは、何が間違っているのでしょうか?

HTML:<select ng-model="options.metricId" ng-options="answer.id as answer.name group by answer.question for answer in options.answers track by answer.id"></select>

options.metricIdコントローラによって適切に設定されています。

オブジェクトは次のoptions.answersようになります。 {id: 8, name: "Leads Others", question: "Assessment"}

すべてのオプションが表示されていますが、answer.id == options.metricId期待どおりの値が選択されていません。

すべての値を取得するために ...なしng-options=""で JSON オブジェクトを反復処理する最良の方法は何ですか? ng-repeat=""

単一でレンダリングされた場合、 1a、1b、2a、2bを返す必要があります。<option><select>

みたいなのを間違って思ってしまった…

...サブオブジェクトを反復します。別の機能が必要ですか？ある種のスコープ定義？どんな助けでも大歓迎です。

http://jsfiddle.net/G9jGa/71/

以下は機能しますが、非常に扱いにくいことに注意してください。後で後悔する可能性がある、よりタイトにするためのヒントや落とし穴を探しています。

ネストされたオブジェクトの平坦化された配列:

<select>1 つは親用、もう 1 つは子用の 2 つのオブジェクトに入力し、それらの階層関係を維持する必要があります。そのため、親が選択されると、その下にない子は除外されます。

子が選択されている場合と同様に、親はモデル全体で自動的に認識されます

何かが欠けているような気がします。

http://jsfiddle.net/petarsubotic/65kwvnjz/11/

私の例で ng-options ディレクティブが機能しない理由がわかりません:

http://plnkr.co/edit/wwAIDHl6U7YaScRzIKAY

app.coffee

index.html

コンパイル関数で ng-options (渡すことができますが、デフォルトでは ) を使用して select を追加し、ng-model を監視して data-bindedを の値にlabel for value in filterableOptions設定するリンク関数を返します。$scope.colFilterable$scope.filter

現在要素内にあるものを保持したいので、テンプレートを使用できません。この選択を追加したいだけで、結果のテーブルをフィルタリングする必要があります

編集：

わかりました、どちらの方法でも機能せず、結果が親スコープに伝播されないように見えるので、変更イベントhttp://plnkr.co/edit/qzaf1sBoFuVD8fow0tfA$scope.$watch 'filter'を使用するように書き直しました

optionこれは、要素を手動で記述した場合に機能します

次のオブジェクト構造があると仮定します: { id: 1, name: 'name', description: 'test' }

次のコードを使用して、ドロップダウンからオブジェクトを選択できます。

個々の ID を次のように選択します。

オブジェクト全体または個々のフィールドを 1 つだけ選択する代わりに、複数のフィールドを選択する方法はありますか? 例えば

基本的に、オブジェクト全体ではなく、オブジェクトのサブセットを返したいと考えています。私の場合、オブジェクト全体に含まれるフィールドが多すぎます。

UI で次のドロップダウンを定義したとします。

そしてコントローラーで：

$scope.selectedItemたとえば、アイテム配列に存在する値にモデルを設定すると、期待どおりの{name: 'item 1', id: 1}角度が事前選択'item 1'されます。

しかし、アイテム配列に存在しない偽のアイテムにモデルを設定すると、たとえば、UI で予期される$scope.selectedItem = {name: 'item 6', id: 6}角度の事前選択が行われますが、モデルは残ります。'Please select...'{name: 'item 6', id: 6}

偽のアイテムの例では、角度の代わりにモデル$scope.selectedItemを設定する方法はありますか?null{name: 'item 6', id: 6}

私の場合、$scope.selectedItemオブジェクトはデータベースに保存されているため、将来ロードされたときに、オブジェクトが$scope.items配列に存在することを保証できません。オブジェクトが配列に存在しなくなった場合は、古いオブジェクトを保持するのではなく、Angular でモデルを null に設定したいと思います。

明らかな解決策は、オブジェクトが配列に存在するかどうかを確認し、存在しない場合$scope.selected = nullはコントローラーに手動で設定することですが、より簡単でクリーンなオプションがあるかどうかを確認したいと考えていました。

解決：

ディレクティブを使用することを選択しました:

私はオブジェクトのコレクションを持っています。これは連想配列と呼ばれていると思います。とにかく、そのリストでアイテムを見つけて更新したいと思います。ちなみに、このコレクションは select の ng-model です。lodash にはこのタイプの機能がいくつかあることは知っています。アイテムを見つけることはできますが、アイテムを更新する最善の方法がわからないため、選択したデータ バインディングは引き続き機能します。

動作しない例を次に示します。

'track by' 式を使用して、オブジェクトの配列で値によって選択を追跡しようとしていますが、機能させることができません。

JS

HTML

ブラウザーに結果を次のように表示させたい:

この問題について何か助けてもらえますか?