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, оно не будет установлено.

Ответ 1

Документация не является явной, но вы должны использовать ng-selected. Я создал codepen для иллюстрации, но в основном:

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

Это позволит выбрать вторую категорию (индекс 1 в вашем массиве категорий).

Ответ 2

Вам нужно использовать 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 .

Ответ 3

чтобы установить значение по умолчанию для выбора, вы можете использовать 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>

Ответ 4

В моем случае добавление ng-model-options="{trackBy: '$value.id'}", как описано в docs, не работало, так как начальное значение не было установлено.

При явной настройке модели на желаемое значение по умолчанию в контроллере правильно установите значение по желанию. Этот подход может быть проще, если вы не знаете перед индексом элемента, который хотите отобразить, как предварительно выбранный (используя 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"},
]

Ответ 5

Использовать значение в ng-option insted ng-value

Ответ 6

Как указано в директиве md-select, вы можете использовать опции ng-model.

Смотрите post