AngularJS-麻烦设置默认下拉菜单选项

JD06

我是AngularJS的新手。现在,我在电子商务网站上应用了以下两个过滤器:

                         <div ng-show="user.ShipMethod != null && shippers && orderShipAddress.AddressName != 'BIG'" " ng-class="{'view-form-select': !currentOrder.LineItems[0].ShipperName, '': currentOrder.LineItems[0].ShipperName }">
                                <label ng-class="{required: !currentOrder.IsMultipleShip() && user.ShipMethod != null}" ng-show="currentOrder.LineItems[0].ShipperName || !currentOrder.IsMultipleShip() && user.ShipMethod != null">{{('Shipping' | r) + ' Method' | xlat}}</label>
                                <select class="form-control" ng-change="updateShipper()" name="shipMethod"
                                        ng-model="currentOrder.LineItems[0].ShipperName"
                                        ng-show="user.ShipMethod.ShipperSelectionType == 'UserDropDown'"
                                        ng-options="shipper.Name as (shipper.Name + ' ' + (shipper.ShippingRate.Price | currency | xlat)) for shipper in shippers | filter: { Name: '!Pick-Up at BIG'}"
                                        ng-required="!currentOrder.IsMultipleShip() && user.ShipMethod != null" >

                                    <option value=""></option>
                                </select>
                                <i class="fa fa-truck"></i>
                            </div>

                            <div ng-show="user.ShipMethod != null && shippers && orderShipAddress.AddressName == 'BIG'" ng-class="{'view-form-select': !currentOrder.LineItems[0].ShipperName, '': currentOrder.LineItems[0].ShipperName }">
                                <label ng-class="{required: !currentOrder.IsMultipleShip() && user.ShipMethod != null}" ng-show="currentOrder.LineItems[0].ShipperName || !currentOrder.IsMultipleShip() && user.ShipMethod != null">{{('Shipping' | r) + ' Method' | xlat}}</label>
                                <select class="form-control" ng-change="updateShipper()" name="shipMethod"
                                        ng-model="currentOrder.LineItems[0].ShipperName"
                                        ng-show="user.ShipMethod.ShipperSelectionType == 'UserDropDown'"
                                        ng-options="shipper.Name as (shipper.Name + ' ' + (shipper.ShippingRate.Price | currency | xlat)) for shipper in shippers | filter: { Name: 'Pick-Up at BIG'}"
                                        ng-required="!currentOrder.IsMultipleShip() && user.ShipMethod != null" >
                                    <option value=""></option>
                                </select>
                                <i class="fa fa-truck"></i>
                            </div>
                        </div>

我的控制器位于这里:https : //big.four51ordercloud.com/test0530/js/directives/ordershipping.js

在我的控制器中,我想出了这个选项来设置默认的下拉菜单选项,但是我不确定将其放在updateShipper()函数中的哪个位置。如果下拉菜单中只有1个选项,我希望它为默认设置。现在,如果有1个选项,则用户必须手动选择它,但是其他选项可能会填充,具体取决于是否满足其他过滤器的条件。您看到的第一个过滤器将始终在下拉列表中产生多个选项,而第二个过滤器将始终仅产生一个选项-“ BIG上车”选项。

$scope.currentOrder.LineItems[0].ShipperName = $scope.shippers[0];
纳瓦内特

使用ng-model设置列表项的默认值。每当您选择一个项目时,您设置的ng-model变量都会更新

例子

<select  ng-options="p for p in animal"
            ng-model="selectedanimal"></select>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS在下拉菜单中设置默认选择的选项

来自分类Dev

选择下拉菜单选项时会显示空格-angularjs

来自分类Dev

如何使用angularjs设置下拉菜单默认值

来自分类Dev

AngularJS:使用指令将选择下拉菜单应用于页面时,设置默认选择选项

来自分类Dev

Angularjs-Angular UI Grid:是否可以通过rowentity值动态过滤下拉菜单选项?

来自分类Dev

AngularJS-下拉菜单不显示所选选项

来自分类Dev

带下拉菜单的angularjs

来自分类Dev

AngularJS级联下拉菜单

来自分类Dev

AngularJS创建下拉菜单

来自分类Dev

从angularjs的下拉菜单中调用href

来自分类Dev

AngularJS切换下拉菜单

来自分类Dev

AngularJS 分页到下拉菜单

来自分类Dev

从 angularjs 下拉菜单中添加值

来自分类Dev

所需想法:AngularJS:选择带有多个选项标签的下拉菜单

来自分类Dev

所需想法:AngularJS:选择带有多个选项标签的下拉菜单

来自分类Dev

使用AngularJS从单击按钮的下拉菜单中选择所有选项

来自分类Dev

需要下拉菜单选项

来自分类Dev

如何隐藏下拉菜单选项?

来自分类Dev

过滤多选下拉菜单选项

来自分类Dev

AngularJs:如何为下拉菜单中ng-otons的选定值的默认值触发ng-change事件

来自分类Dev

下拉菜单取决于其他下拉菜单-angularjs

来自分类Dev

在AngularJS中取消选择ng-options下拉菜单

来自分类Dev

在AngularJS + Bootstrap中动态添加的下拉菜单

来自分类Dev

AngularJS在带空格的下拉菜单中附加了属性

来自分类Dev

Materializecss下拉菜单不适用于AngularJS

来自分类Dev

下拉菜单不会从Angularjs中的模型中选择值

来自分类Dev

添加行后如何避免下拉菜单重复[AngularJS]

来自分类Dev

AngularJS基于变量启用/禁用下拉菜单

来自分类Dev

嵌套的json中的angularjs ng-repeat下拉菜单

Related 相关文章

  1. 1

    AngularJS在下拉菜单中设置默认选择的选项

  2. 2

    选择下拉菜单选项时会显示空格-angularjs

  3. 3

    如何使用angularjs设置下拉菜单默认值

  4. 4

    AngularJS:使用指令将选择下拉菜单应用于页面时,设置默认选择选项

  5. 5

    Angularjs-Angular UI Grid:是否可以通过rowentity值动态过滤下拉菜单选项?

  6. 6

    AngularJS-下拉菜单不显示所选选项

  7. 7

    带下拉菜单的angularjs

  8. 8

    AngularJS级联下拉菜单

  9. 9

    AngularJS创建下拉菜单

  10. 10

    从angularjs的下拉菜单中调用href

  11. 11

    AngularJS切换下拉菜单

  12. 12

    AngularJS 分页到下拉菜单

  13. 13

    从 angularjs 下拉菜单中添加值

  14. 14

    所需想法:AngularJS:选择带有多个选项标签的下拉菜单

  15. 15

    所需想法:AngularJS:选择带有多个选项标签的下拉菜单

  16. 16

    使用AngularJS从单击按钮的下拉菜单中选择所有选项

  17. 17

    需要下拉菜单选项

  18. 18

    如何隐藏下拉菜单选项?

  19. 19

    过滤多选下拉菜单选项

  20. 20

    AngularJs:如何为下拉菜单中ng-otons的选定值的默认值触发ng-change事件

  21. 21

    下拉菜单取决于其他下拉菜单-angularjs

  22. 22

    在AngularJS中取消选择ng-options下拉菜单

  23. 23

    在AngularJS + Bootstrap中动态添加的下拉菜单

  24. 24

    AngularJS在带空格的下拉菜单中附加了属性

  25. 25

    Materializecss下拉菜单不适用于AngularJS

  26. 26

    下拉菜单不会从Angularjs中的模型中选择值

  27. 27

    添加行后如何避免下拉菜单重复[AngularJS]

  28. 28

    AngularJS基于变量启用/禁用下拉菜单

  29. 29

    嵌套的json中的angularjs ng-repeat下拉菜单

热门标签

归档