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


person americanslon    schedule 07.08.2015    source источник


Ответы (7)


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

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

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

person Huey    schedule 07.08.2015
comment
но как получить выбранное значение? - person Muneem Habib; 11.06.2016
comment
Как в примере выше. Или, если это сложнее, напишите функцию и прикрепите ее к $scope. - person dsummersl; 18.04.2017

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

person masitko    schedule 15.06.2016
comment
как насчет того, чтобы хотеть 2 уникальных поля модели для trackby. это возможно? - person Mustafa; 01.07.2016
comment
Уникальное поле уникально. Если вам нужно использовать два поля, они не уникальны. Вы можете создать комбинированный уникальный индекс с этими двумя полями и использовать его. - person Frieder; 14.09.2016

чтобы установить значение по умолчанию для 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> 
person BERGUIGA Mohamed Amine    schedule 31.05.2016
comment
Я использовал ng-selected=true для всех выбранных - person Sarower Jahan; 17.07.2017
comment
Я присваиваю значение, подобное этому $scope.ng-model = 'присвоенное значение'. Но это не придаст ему никакой ценности. - person rahim.nagori; 21.05.2019

Это простое решение, если вы хотите по умолчанию использовать первое значение в раскрывающемся списке.

Используйте 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 для демонстрации.

person Max Pringle    schedule 01.05.2018

В моем случае добавление 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"},
]
person Francesco    schedule 26.10.2016

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

person Kapil Bhalala    schedule 11.07.2017
comment
Привет, добро пожаловать в Stack Overflow. Можете ли вы немного рассказать об этом, может быть, написать пример кода? - person msanford; 11.07.2017

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

См. этот сообщение.

person Ameur fahd    schedule 28.11.2015
comment
Вы должны уточнить свой ответ. - person Bartho Bernsmann; 17.03.2017