Question

我似乎无法将我的下拉列表设为默认选择第一个商店。

HTML：

<select 
      id="store" 
      class="form-control input-inline input-medium"
      ng-model="orderVm.Stores.selectedStore.id">
    <option 
         ng-repeat="store in orderVm.Stores" 
         value="{{store.Id}}">
        {{store.MarketplaceName}}
    </option>
</select>
{{orderVm.Stores.selectedStore}}

vm.Stores（从本地JSON文件加载）：

[
  {
    "Id": 1,
    "MarketplaceId": 1,
    "MarketplaceName": "Etsy"
    ]
  },
  {
    "Id": 2,
    "MarketplaceId": 2,
    "MarketplaceName": "Shopify"
  }
]

控制器：

angular
    .module('WizmoApp')
    .controller('orderController', orderController);

orderController.$inject = ['$http', '$location', 'toastr', 'DTColumnDefBuilder', 'DTOptionsBuilder', 'Cart', 'OrderService', 'PackageService'];

function orderController($http, $location, toastr, DTColumnDefBuilder, DTOptionsBuilder, Cart, OrderService, PackageService) {
        var vm = this;
        vm.Stores = json; //from file 
        vm.Stores.selectedStore = {
            id: vm.Stores[0].Id, 
            name: vm.Stores[0].MarketplaceName 
        };

        OrderService.getOrdersGroupedByStore(function (json) {
            vm.Stores = json;
            vm.selectedStore = {};
        });

routes.js：

            .state('layout.orders', {
                url: '/orders',
                templateUrl: '/Content/js/apps/store/views/order.html',
                controller: 'orderController',
                controllerAs: 'orderVm',
                data: { pageTitle: 'Orders' }
            })

（第一个选项是空白，但首先是第一个选项没有帮助。）

我使用ng-options但坦率地说，它比这更加模糊。

Answer 1

https://jsbin.com/kanaco/edit?html,js,output

我为你写了一个示例代码。使用ng-options进行选择。

编辑：

<select id="store" class="form-control input-inline input-medium" 
    ng-model="ctrl.selectedStores" 
    ng-options="item.MarketplaceName for item in ctrl.Stores"
    ng-init="ctrl.selectedStores=ctrl.Stores[0]">
</select>

您可以使用ng-options作为重复选项，并使用ng-init进行默认选择。

Answer 2

永远不要使用ng-repeat来构建选择选项。相反，请使用ng-options，它具有专门的指令：

<select 
  id="store" 
  class="form-control input-inline input-medium"
  ng-model="orderVm.Stores.selectedStore"
  ng-options="store.ID as store.MarketplaceName for store in orderVm.Stores">
</select>

在控制器中，您需要为选择模型指定默认值：

orderVm.Stores.selectedStore = 1;

这将导致在控制器加载时选择Etsy选项。请注意，此处的模型只是一个ID，您不需要使用对象。您获得空选项的原因是Angular无法将模型绑定到任何选项。

我有一个very similar problem给你，并被一位善良的大师所赐。

angular select默认为第一个选项

2 个答案: