Question

我想要重构一个ng-switch语句。它看起来像这样：

<div ng-switch on="property.type">
    <input type="text" ng-switch-when="string" ng-model="property.value" placeholder="Property value">
    <select ng-switch-when="bool" ng-model="property.value" ng-options="value for value in [true,false]" placeholder="Property value"></select>
    <input type="number" ng-switch-when="int" ng-model="property.value" placeholder="Property value">
    <input type="text" ng-switch-default ng-model="property.value" placeholder="Property value">
</div>

您可以注意到ng-model和placeholder选项与所有情况相同。我的问题是：我能否以某种方式重构这些选项只能写一次？

谢谢！ URI

Answer 1

虽然没有完全重构以避免所有重复，但您可以通过组合输入标记来减少一点：

<div ng-switch on="property.type">
  <select ng-switch-when="bool" ng-model="property.value" ng-options="value for value in [true,false]" placeholder="Property value"></select>
  <input type="{{property.type == 'int' ? 'number' : 'string'}}" ng-switch-default ng-model="property.value" placeholder="Property value">
</div>

可以在http://plnkr.co/edit/FybDC1I4U7rSC6GZJ3az

看到

如果这是我正在进行的项目，我怀疑我不会进一步重构它，留下少量的重复标记，以便保持清楚。

带有共享选项的ng-switch

1 个答案: