Angular ：下拉菜单，防止 ng-selected 触发 ng-change

Question

我在 forloop 中填充下拉菜单，并希望根据表达式为每个下拉菜单设置默认值。这似乎可行，但我的问题是当我通过 ng-selected 设置默认值时，它也会触发不理想的更改事件。

我希望仅当下拉列表实际发生更改时才触发更改事件。

<div layout="row" ng-if="layer.Styles && layer.Styles.length > 1">
    <md-input-container class="md-icon-float md-block layer-style">
        <md-select ng-change="vm.changeLayerStyle(layer,selectedStyle)" ng-model="selectedStyle" ng-model-options="{trackBy: '$value.Name'}" aria-label="Change Layer Style">
            <md-option ng-repeat="style in layer.Styles" ng-value="style" ng-selected="style.IsDefault == true">
                {{style.DisplayName}}
            </md-option>
        </md-select>
    </md-input-container>
</div>

下拉菜单使用 angular material

Answer 1

重复选项元素曾给人们带来问题。通常我会告诉你在 select 上使用 ng-options，但是由于你特别需要使用一些 material 组件，所以这不是一个选项。

我知道这不是最好的解决方案，但您可以通过保留最后一个值的副本并将其与当前值进行比较来解决问题，一旦更改事件被触发。如果该值没有改变，则忽略该事件。这可能需要一些额外的调整，因为设置 layer.Styles 可能只会触发大量更新。

既然你没有给我们一个 plunker 来玩，我只能建议你玩玩 ng-model-options（你已经用它来控制 track-by）updateOn属性并将其设置为不会由您设置 selected 属性触发的内容。这里想到值 blur。

Angular ：下拉菜单，防止 ng-selected 触发 ng-change

Angular : Dropdowns, prevent ng-selected to fire ng-change

angularjs

angular-material