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

Question

我正在使用for循环填充下拉菜单，并希望根据表达式为每个下拉菜单设置默认值。看起来这样做是有效的，但我的问题是，当我通过ng-selected设置默认值时，它也会触发change事件，这并不理想。

我希望只有在实际更改下拉菜单时才触发change事件。

<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 来创建下拉菜单

- StevieB

---

尝试使用ngModel来设置值。 - Shintu Joseph

Answer 1

重复选项元素的问题在许多情况下都会给人们带来麻烦。通常我会建议您在选择器上使用ng-options，但由于您需要使用一些材料组件，这不是一个选项。

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

由于您没有提供一个可供我们使用的plunker，我只能建议您尝试使用ng-model-options（您已经在使用它来控制track-by），将updateOn属性设置为不会被您设置的选定属性触发的内容。这里想到了blur这个值。

- Per Hornshøj-Schierbeck

---

是的，我有点倾向于你的第一个选项，在被 ng-change 调用的函数中，我会这样做：如果(serviceLayer.Style === style.Name) return; 这样就可以得到我想要的结果。虽然在重复器中控制它会更好，但没关系。 - StevieB