ng-init 的预选选项在 ngOptions 中不起作用 | AngularJS

Question

我的 angular 控制器中有对象 product = {id: "759", name: "someName", category_id: "139", cartridge_type: 2 ...}。

为什么 ngOptions 中的预选选项不起作用？ Select 呈现空选项，就好像 product.cartridge_type 会是 null。

HTML

<select class="form-control"
        id="cartridge_type"
        name="cartridge_type"

        ng-init="product.cartridge_type=product.cartridge_type||cartridgeTypeScope[0]"
        ng-model="product.cartridge_type"
        ng-options="cartridge_type.id as cartridge_type.name for cartridge_type in cartridgeTypeScope">

    <option value="">Select type</option>
</select>

JS

$http.get('someApiPath').success(function(data) {
    $scope.product = data[0];
    console.log( $scope.product );
});

$scope.cartridgeTypeScope = [
    {
        id: 0,
        name  : '-'
    },
    {
        id: 1,
        name  : 'cartridgeType1'
    },
    {
        id: 2,
        name  : 'cartridgeType2'
    }
]

Answer 1

只需在 ng-init

中简单使用 cartridgeTypeScope[0].id

ng-init="product.cartridge_type=product.cartridge_type||cartridgeTypeScope[0].id"

问题是您正在使用 cartridge_type.id as cartridge_type.name，它在 select 中需要 id，但在 ng-init 中，您正在为它提供完整的对象 (cartridgeTypeScope[0])。所以它不是 select你的期权价值。

或者你可以这样做您可以使用相同的 ng-init 但从 ng-options

中删除 cartridge_type.id as

ng-init="product.cartridge_type=product.cartridge_type||cartridgeTypeScope[0]"

 ng-options="cartridge_type.name for cartridge_type in cartridgeTypeScope"

希望对您有所帮助:)

更新

对于控制器默认选项，您需要执行

  $scope.product={
    "cartridge_type":2
  }

更新 2:- 对于 $http:-

Plunker

ng-init 的预选选项在 ngOptions 中不起作用 | AngularJS

Preselected option by ng-init doesn't work in ngOptions | AngularJS

javascript

angularjs

ng-options