6

AngularJS が常に選択でレンダリングする空のオプションを削除する方法について、私は高低を検索してきました。オプションがコードに直接配置されたJSON配列から派生している場合、これを行う多くの情報が見つかりましたが、データオブジェクトを操作するときにこの空のオプションを削除することについては何も見つかりません.

データベースに「foo」というオブジェクトがあり、「foo」には「name」と「bar_id」の両方があるとします。

データオブジェクトでこれを行うことについて誰かが私に手がかりを与えることができますか?

参照: Angular JS 選択オプションから空白オプションを削除

http://jsfiddle.net/MTfRD/3/ (これは、上記の SO の質問からの誰かのフィドルです。コードは私のものではありませんが、そのフィドルから取得したものです。)

JS:

function MyCtrl($scope) {
    $scope.typeOptions = [

        { name: 'Feature', value: 'feature' }, 
        { name: 'Bug', value: 'bug' }, 
        { name: 'Enhancement', value: 'enhancement' }
    ];

    $scope.form = {type : $scope.typeOptions[0].value};
}

foo.name と foo.bar_id を取得したい。foo.name をオプション ラベルに、foo.bar_id を値にします (たとえば<option value="foo.bar_id">foo.name</option>、各 foo について、foo.bar_id はレコード内の識別パラメーターになり、「変更時」にプルアップして表示します (選択するとすぐに)オプションの）。

これを設定するために考えられるすべてのことを試しましたが、何もうまくいかないようです。最悪の場合、何も言わずに失敗して、私が何を間違っているのか分からないか、または foo がオブジェクトではないと不平を言って、私を際限なく苛立たせます。（「foo」は、私が取り組んでいる実際のコードでAJAXリクエストによってロードされており、他の場所ではオブジェクトとして正常に機能します-NDAにより、実際のコードを共有することは禁じられていますが、申し訳ありません。）

上記の他のスレッドの例を使用するとng-model="typeOptions"、テンプレート内の select タグに次のようなものを割り当てることは理解できますが、「typeOptions」を取得して foo にアクセスし、foo.name をオプション ラベルにし、foo.bar_id をオプション値にする方法を理解しています。 ? また、オプションのデフォルトの角度値 (生成されたインデックスのように見えるもの) は問題ありませんが、タスクを完了するために foo.bar_id を呼び出す必要があるため、「どこかに」ある必要があります。

助けていただければ幸いです。現在、私はオプション自体でハックな ng-repeat にこだわっていますが、これはベスト プラクティスではないことを理解しています。 、私はそれらをうまく使用できるようになります。ありがとう！

4

4 に答える 4

10

アップデート

わかりました、私はあなたの本当の質問が何であるかを理解しました（少なくとも私はそう願っています;））。幸いなことに、これは非常に簡単です。

コントロール:

$scope.options = {
  a: 1,
  b: 2,
  c: 3      
};

$scope.selected = 1;

ビュー:

<select
  data-ng-model="selected"
  data-ng-options="v as k for (k, v) in options"
></select>

デモ: http://jsbin.com/hufehidotuca/1/

その他のオプションについては、マニュアルをご覧ください。特に下：

ngOptions (オプション) » オブジェクト データ ソースの場合:

以前の回答:

私がコメントに書いたようにngOptions、

  1. ビューの実際のオプション値としてモデルデータを使用するように角度を強制することはできません。Angular はこれを独自の方法で処理します。スコープモデルが変更時に正しい値に設定されることを保証するだけです。それが望ましくない場合は、おそらく を使用して、独自のディレクティブを作成する必要がありますngRepeat。

  2. 常に 2 つの別個のモデルが必要になります。オプションのリストとして機能するもの (これはおそらく常にオブジェクトの配列である必要があります) と、選択された値を格納するもの (ngOptionsディレクティブの設定方法によって異なります)。

  3. ヒント:悪名高い空白のオプションは、angular がngModelオプションのリストに割り当てられたものと一致せず、実際の空白のオプションが設定されていない場合に常に発生します。(注:が現在のスコープ内にある場合、またはその値がオプションのリストと一致しない場合は、オプションの最初の選択で設定されるか、値がオーバーライドされます。これが空白の理由ですngModel。undefinedオプションは後で消えます。)

コントロール:

// the "list of options"
$scope.options = [
  { name: 'A', id: 1 },
  { name: 'B', id: 2 },
  { name: 'C', id: 3 },
  { name: 'D', id: 4 }
];

// a pre-selection by value
$scope.asValue  = 2;

// a pre-selection by object-identity
$scope.asObject = $scope.options[3];

ビュー:

<!-- select as value -->
<select
  data-ng-model="asValue"
  data-ng-options="foo.id as foo.name for foo in options"
></select>

<!-- select as object -->
<select
  data-ng-model="asObject"
  data-ng-options="foo as foo.name for foo in options"
></select>

<!-- the notorious blank option -->
<select
  data-ng-model="asBogus"
  data-ng-options="foo as foo.name for foo in options"
></select>

<!-- blank option correctly set up -->
<select
  data-ng-model="asBogus"
  data-ng-options="foo as foo.name for foo in options"
>
  <option value="">Please select</option>
</select>

デモ:

http://jsbin.com/yasodacomadu/1/

于 2014-08-26T07:06:41.260 に答える
1 

<select ng-model="form.type" required="required"
  ng-options="option.value as option.name for option in typeOptions" >
    <option style="display:none" value="">select a type</option>
</select>

于 2015-05-20T11:08:47.243 に答える
0

Css を使用している間、次のように空のオプションを削除します

<option value="?undefind"></option>

したがって、Css を使用しているときに、空のオプションを削除できます。

このフィドルに表示

http://jsfiddle.net/KN9xx/1060/

于 2016-12-07T05:18:15.443 に答える