web-dev-qa-db-ja.com

md-selectは選択された値を設定できません

md-select次のように設定します。

<md-select placeholder="Category" ng-model="current.Category" flex >
    <md-option ng-repeat="item in categories" ng-value="{{item}}">{{item.Name}}</md-option>
</md-select>

@scope.categories値は

[  
{  
  "Name":"Commercial & Industrial",
  "ParentId":null,
  "Categories":[  
     {  
        "Name":"Deceptive Marketing",
        "ParentId":19,
        "Categories":[  

        ],
        "Id":24,
        "ModifiedDate":"2015-08-06T07:49:53.0489545",
        "CreatedDate":"2015-08-06T15:49:51.707"
     },
     {  
        "Name":"Aggressive Agents",
        "ParentId":19,
        "Categories":[  

        ],
        "Id":25,
        "ModifiedDate":"2015-08-06T07:50:10.0026497",
        "CreatedDate":"2015-08-06T15:50:08.63"
     }
  ],
  "Id":19,
  "ModifiedDate":"08/06/2015 @ 7:49AM",
  "CreatedDate":"08/06/2015 @ 3:49PM"
 },
 {  
  "Name":"Competitive Supply",
  "ParentId":null,
  "Categories":[  
     {  
        "Name":"Security Deposit",
        "ParentId":20,
        "Categories":[  

        ],
        "Id":21,
        "ModifiedDate":"2015-08-06T07:49:30.3966895",
        "CreatedDate":"2015-08-06T15:49:25.8"
     },
     {  
        "Name":"Meter",
        "ParentId":20,
        "Categories":[  

        ],
        "Id":22,
        "ModifiedDate":"2015-08-06T07:49:34.6571155",
        "CreatedDate":"2015-08-06T15:49:33.3"
     },
     {  
        "Name":"Bill",
        "ParentId":20,
        "Categories":[  

        ],
        "Id":23,
        "ModifiedDate":"2015-08-06T07:49:41.7268224",
        "CreatedDate":"2015-08-06T15:49:40.357"
     }
  ],
  "Id":20,
  "ModifiedDate":"08/06/2015 @ 7:49AM",
  "CreatedDate":"08/06/2015 @ 3:49PM"
   }
]

md-select 正常に動作します。しかし、私が理解できないのは、選択値を設定する方法です。モデルを設定しようとするとcurrent.Categoryから$scope.categories設定されません。

angularjsangular-material
22
americanslon

ドキュメントは明示的ではありませんが、ng-selectedを使用する必要があります。説明のために codepen を作成しましたが、基本的には：

<md-option ng-repeat="(index,item) in categories" ng-value="{{item}}"
           ng-selected="index == 1">    
    {{item.Name}}
</md-option>

これにより、2番目のカテゴリ（カテゴリ配列のインデックス1）が選択されます。

33
Huey

ng-model-options、trackByを使用して、セレクターとしての一意のモデルフィールド：

<md-select placeholder="Category" 
    ng-model="current.Category" 
    ng-model-options="{trackBy: '$value.Id' }" // <-- unique field 'Id'
    flex >
    <md-option 
     ng-repeat="item in categories" 
     ng-value="{{item}}">{{item.Name}}</md-option>
</md-select>

このソリューションについては、Angular Material's official documentation で説明されています。

16
masitko

selectのデフォルト値を設定するには、ng-selectedおよびng-modelを使用できます

    <md-select ng-model="vmIdPage.number">
             <md-option ng-value="mod" ng-repeat="mod in vmIdPage.initObject.listeModaliteMisePlace" ng-selected="{{ mod.id === vmIdPage.number.id ? 'true' : 'false' }}">
                {{mod.libelle}}
             </md-option>
    </md-select>
3
BERGUIGA Mohamed Amine

ドロップダウンの最初の値をデフォルトにしたい場合、このソリューションは簡単です。

使用 ng-select="$first"。これにより、ドロップダウンはデフォルトで最初の値になります。

<md-select placeholder="Categories" ng-model="current.category">
   <md-option ng-repeat="(index, item) in categories" value="{{item}}"
              ng-selected="$first">{{item.Name}}</md-option>
</md-select>

以下に示すのは CodePen です。

1
Max Pringle

私の場合、初期値が設定されていないため、 docs で説明されているng-model-options="{trackBy: '$value.id'}"の追加は機能しませんでした。

コントローラーでモデルを希望のデフォルト値に明示的に設定することにより、必要に応じて値を適切に設定します。このアプローチは、事前選択された（ng-selectedを使用して）表示する要素のインデックスを事前に知らない方が簡単かもしれません。もちろん、コントローラーで評価することもできますが、私には、ターゲット要素をモデルに直接設定する方がより迅速に思えます。

表示：

<div class="input-style-border">
   <md-select ng-model="vm.selectedGlobalFilter">
       <md-option ng-value="item" ng-repeat="item in vm.globalFilterValues">
            {{item.value}}
       </md-option>
   </md-select>
</div>

コントローラー：

function initialize() {
        vm.globalFilterValues = globalFilterValues;
        vm.selectedGlobalFilter = TransferGlobalFilter.Worldwide;
    }

GlobalFilterValuesの形式は次のとおりです。

[
  {key:"All", value:"All values" },
  {key:"Manager", value:"Manager"},
  {key:"HR", value:"Human resources"},
]
0
Francesco

Ng-valueの代わりにng-optionの値を使用します

0
Kapil Bhalala