Angular JS选择ng-options而不是ng-repeat

Question

我有一个选择框，其中我使用ng-repeat生成了选项，但我希望使用ng-options生成该选项。

<select ng-change="onChangeShippingMethod(shippingMethodId)" ng-model="shippingMethodId" class="input-full-w normal_dropDown" name="gjh" id="select_shipping_method" >
    <option ng-repeat="shippingDetail in shipModeArr" value="{{shippingDetail.shipModeId}}" ng-selected="shippingDetail.shipModeId == selectedAddressPerItem[cartItems[0].cartItemId].shipModeId">
        {{shippingDetail.description}}&nbsp;Arrives {{shippingDetail.estArrivalDate | changeDateFormat | date:'mediumDate'}}{{shippingDetail.shipCharge | currency}}
    </option>
</select>

我希望根据某些条件选择特定的选项。

并且使用ng-repeat一个空选项与其他选项一起出现

请检查小提琴

Answer 1

如果您将提供一些数据，然后有人会为此提琴，那就太好了。现在我可以给您语法，尝试在您的代码上应用此方法。

<select class="form-control" ng-model="searchState" ng-options="st.state for st in stateList | filter:searchCountry | orderBy:'state'">
<option value="">Select State</option>

在这里，我在jsfiddle示例中有ng-option的演示。 为满足特定条件而摆弄 ，请在下一个问题中提及，或者使用上面代码中显示的过滤器。 请以更详细的格式列出您的问题。 包括data，app.js代码和一些html。 祝好运。

Answer 2

这就是我想出的。 下次您应该为自己提供一些数据。

ng选项的有趣部分是列表理解，例如样式

ng-options="sD.shipModeId as sD.description for sD in shipModeArr"

编辑：

ng-options="sD.shipModeId as format(sD) for sD in shipModeArr"

在控制器中：

$scope.format = function(sd){
    return sd.description
    + ' Arrives '
    + sd.estArrivalDate + ' '
    + $filter('currency')(sd.shipCharge);
};

您可以为自己定义一个函数，以很好地格式化对象。 我编辑了插棒，向您展示了放置碎片的位置。 如果展开$ scope.format函数以返回格式，则此方法应该有效。

如果您不希望有一个空选择，则必须选择一个初始值。

EDIT2：

我更新了你的小提琴 。

plnkr