md-select无法设置所选值

Question

我的0x000000000040054d <+32>: cmp BYTE PTR [rbp-0x1],0x40 0x0000000000400551 <+36>: jle 0x40056a <main+61> 0x0000000000400553 <+38>: cmp BYTE PTR [rbp-0x1],0x5a 0x0000000000400557 <+42>: jg 0x40056a <main+61> 设置如下：

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

Answer 1

文档不明确，但您应该使用DBPath。我已经创建了来说明，但基本上是：

Env

这将选择第二个类别（类别数组中的索引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-value中使用值ng-value

Answer 7

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

请参阅此post