我是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] 删除。
我来说两句