web-dev-qa-db-fra.com

md-select ne peut pas définir la valeur sélectionnée

J'ai un md-select configuré comme suit:

<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 valeur est

[  
{  
  "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"
   }
]

Le md-select fonctionne bien. Mais ce que je ne peux pas comprendre, c'est comment définir la valeur de sélection. Lorsque j'essaie de définir le modèle current.Category sur l'une des valeurs du $scope.categories, il n'est pas défini. 

angularjsangular-material
22
americanslon

La documentation n'est pas explicite, mais vous devriez utiliser ng-selected. J'ai créé un codepen pour illustrer, mais fondamentalement:

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

Cela sélectionnera la deuxième catégorie (index 1 dans votre tableau de catégories).

33
Huey

Vous devez utiliser ng-model-options, trackBy et choisir un champ de modèle unique comme sélecteur:

<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>

Cette solution est décrite dans documentation officielle .

16
masitko

pour définir la valeur par défaut de select, vous pouvez utiliser ng-selected et 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>
1
BERGUIGA Mohamed Amine

Cette solution est simple si vous souhaitez utiliser par défaut la première valeur du menu déroulant.

Utilisez le ng-select="$first". Ce sera la liste déroulante par défaut à la première valeur.

<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>

Voici un CodePen à démontrer.

1
Max Pringle

Dans mon cas, ajouter ng-model-options="{trackBy: '$value.id'}" comme décrit dans docs ne fonctionnait pas, aucune valeur initiale n’ayant été définie. 

En définissant explicitement le modèle sur la valeur par défaut souhaitée dans le contrôleur, définissez correctement la valeur comme vous le souhaitez. Cette approche pourrait être plus facile si vous ne connaissiez pas à l'avance l'index de l'élément que vous souhaitez afficher comme présélectionné (à l'aide de ng-selected). Vous pouvez bien sûr l’évaluer dans le contrôleur, mais il me semble plus immédiat de définir directement l’élément cible sur le modèle.

Vue:

<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>

Manette:

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

Où globalFilterValues ​​sont sous la forme:

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

Utiliser la valeur dans ng-option au lieu de ng-value

0
Kapil Bhalala