md-select 不能设置选定的值

Question

我有一个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 中的值之一时，它不会被设置。

Answer 1

文档不明确，但您应该使用ng-selected。我创建了一个codepen 来说明，但基本上：

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

这将选择第二个类别（类别数组中的索引 1）。

Answer 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 的official documentation 中描述了此解决方案。

Answer 3

为了设置 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> 

Answer 4

如果您想默认为下拉菜单中的第一个值，此解决方案很简单。

使用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 来演示。

Answer 5

在我的情况下，按照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"},
]

Answer 6

在 ng-option 中使用值 insted of ng-value

Answer 7

就像md-select 指令的文档中指定的一样，您可以使用 ng-model-options。

看到这个post