オプションがオブジェクトで、デフォルトが整数IDの場合、デフォルトのngOptions値を設定する方法

ブランドンアンザルディ

ngOptionsを使用してselect要素を表示していて、モデルをngOptionsの値として設定されている値に接続したいと考えています。

var app = angular.module('test', []);

app.controller('TestCtrl', ['$scope',
  function ($scope) {
    //Use random to simulate different data from an API
    $scope.default = Math.floor(Math.random()*3);
    $scope.options = [
      {
        id: 0,
        name: "Option 1"
      },
      {
        id: 1,
        name: "Option 2"
      },
      {
        id: 2,
        name: "Option 3"
      }
    ];
  }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
  <div ng-controller="TestCtrl">
    <select ng-model="default" ng-options="val.name for val in options track by val.id">
    </select>
    <pre>Default should be ID {{default}}, or Option {{default+1}}
  </div>
</div>

私が使って試してみたtrack byselect asと私は2つのソリューションは、仕事を見つけたが、理想的ではありません。

理想的には、デフォルトを設定できると思います

解決策1:解決策1:

// Loop through entire array of objects
$scope.options.forEach(function (v, k) {
  // Compare ID to what the default should be
  if (v.id === $scope.default) {
    // Set object to default
    $scope.default = v;
    return true;
  }
});

解決策2:解決策2:

JS

$scope.options = {
  "Option 1": 0,
  "Option 2": 1,
  "Option 3": 2
};

HTML

<select ng-model="default" ng-options="value as key for (key, val) in options">

このソリューションで難しいのは、キーをオブジェクトにすることはできないため、オブジェクトの値が2つ以下の場合にのみ機能することです。

オブジェクト全体を含めることなく、Angularにキーでデフォルトを設定させる方法はありますか?

atinder

このようにしてみてください

<select ng-options="item.id as item.name for item in options" ng-model="selected"></select>

その後、コントローラーで

$scope.selected = 1;

同様のplunkrの例

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

オプションオブジェクトが存在しない場合は、ブール値をデフォルトに設定します

分類Dev

Spring Bootでオブジェクトのデフォルトのフォーム値を設定する方法:Thymeleaf

分類Dev

XDocumentオブジェクトに属性が存在しない場合に属性のデフォルト値を設定する方法

分類Dev

Angular 7:Reactive Form mat-selectでデフォルト値を設定する方法は、値が単一のIDではなく複数のIDを持つオブジェクトである場合ですか?

分類Dev

選択オプションのデフォルト値を設定する方法

分類Dev

なしオブジェクトがデフォルト値を設定した場合のJinja2テンプレート変数

分類Dev

値がオブジェクトの場合、md-select にデフォルト値を設定する Angular4 Angular-Material

分類Dev

JavaScriptオブジェクト属性のデフォルト値を設定する

分類Dev

HTMLのオプションのデフォルト値を設定する

分類Dev

orElse clasueでセッターを持つオプションのネストされたオブジェクトに設定されたデフォルト値

分類Dev

オブジェクトがnullでない場合、Javaオプション - nullの場合、メソッドの結果を返します - リターンデフォルト値を

分類Dev

デフォルト値で値を設定するオプション

分類Dev

マングースのオブジェクトの配列にデフォルト値を設定する

分類Dev

PrimeNGラジオボタンのデフォルト値をリアクティブ形式で設定する方法

分類Dev

C#でオブジェクトのデフォルトの `String`値を設定する

分類Dev

整数定数が指すオブジェクトのデフォルトタイプ

分類Dev

ngOptionsはデフォルトですべてのオプションを選択し、選択するとオプションが消えます

分類Dev

複数のオプションのデフォルトの選択値を設定する方法(ion-select)

分類Dev

javascriptオブジェクトにデフォルトの__self__プロパティを設定する方法

分類Dev

オブジェクトテーブルのブールアクティブ列にデフォルト値を設定する必要がありますか?

分類Dev

Highchartでオプションをデフォルトで非アクティブに設定する方法

分類Dev

VueJS + element.eleme.ioel-selectのデフォルトオプション値を設定する方法

分類Dev

非表示の場合はオプションを空白に設定し、表示されている場合はデフォルトのままにする方法-html / php?

分類Dev

空の値からデフォルトオブジェクトを作成する-シンプルなHTMLDOM

分類Dev

選択オプションでデフォルトの静的値を設定する

分類Dev

オブジェクトのVueデフォルト選択オプション

分類Dev

symfony:すべてのルートのデフォルトオプションを設定する方法は?

分類Dev

Angularのオブジェクトを使用して選択ドロップダウンでデフォルト値を設定する

分類Dev

リアクティブフォームの選択オプションにデフォルト値がある

Related 関連記事

  1. 1

    オプションオブジェクトが存在しない場合は、ブール値をデフォルトに設定します

  2. 2

    Spring Bootでオブジェクトのデフォルトのフォーム値を設定する方法:Thymeleaf

  3. 3

    XDocumentオブジェクトに属性が存在しない場合に属性のデフォルト値を設定する方法

  4. 4

    Angular 7:Reactive Form mat-selectでデフォルト値を設定する方法は、値が単一のIDではなく複数のIDを持つオブジェクトである場合ですか?

  5. 5

    選択オプションのデフォルト値を設定する方法

  6. 6

    なしオブジェクトがデフォルト値を設定した場合のJinja2テンプレート変数

  7. 7

    値がオブジェクトの場合、md-select にデフォルト値を設定する Angular4 Angular-Material

  8. 8

    JavaScriptオブジェクト属性のデフォルト値を設定する

  9. 9

    HTMLのオプションのデフォルト値を設定する

  10. 10

    orElse clasueでセッターを持つオプションのネストされたオブジェクトに設定されたデフォルト値

  11. 11

    オブジェクトがnullでない場合、Javaオプション - nullの場合、メソッドの結果を返します - リターンデフォルト値を

  12. 12

    デフォルト値で値を設定するオプション

  13. 13

    マングースのオブジェクトの配列にデフォルト値を設定する

  14. 14

    PrimeNGラジオボタンのデフォルト値をリアクティブ形式で設定する方法

  15. 15

    C#でオブジェクトのデフォルトの `String`値を設定する

  16. 16

    整数定数が指すオブジェクトのデフォルトタイプ

  17. 17

    ngOptionsはデフォルトですべてのオプションを選択し、選択するとオプションが消えます

  18. 18

    複数のオプションのデフォルトの選択値を設定する方法(ion-select)

  19. 19

    javascriptオブジェクトにデフォルトの__self__プロパティを設定する方法

  20. 20

    オブジェクトテーブルのブールアクティブ列にデフォルト値を設定する必要がありますか?

  21. 21

    Highchartでオプションをデフォルトで非アクティブに設定する方法

  22. 22

    VueJS + element.eleme.ioel-selectのデフォルトオプション値を設定する方法

  23. 23

    非表示の場合はオプションを空白に設定し、表示されている場合はデフォルトのままにする方法-html / php?

  24. 24

    空の値からデフォルトオブジェクトを作成する-シンプルなHTMLDOM

  25. 25

    選択オプションでデフォルトの静的値を設定する

  26. 26

    オブジェクトのVueデフォルト選択オプション

  27. 27

    symfony:すべてのルートのデフォルトオプションを設定する方法は?

  28. 28

    Angularのオブジェクトを使用して選択ドロップダウンでデフォルト値を設定する

  29. 29

    リアクティブフォームの選択オプションにデフォルト値がある

ホットタグ

アーカイブ