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

时间:2014-09-04 07:27:10

标签: javascript angularjs

我有一个选择框,我使用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其他选项附带一个空选项

请检查fiddle

2 个答案:

答案 0 :(得分: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-options进行了演示。 fiddle要满足特定条件请在下一个问题中提及那些或使用我在上面的代码中显示的过滤器。请以更详细的格式列出您的问题。包括数据,app.js代码和一些HTML。祝你好运。

答案 1 :(得分:0)

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

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:

我更新了您的fiddle

plnkr