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

Question

我的 Angular Controller 中有对象product = {id: "759", name: "someName", Category_id: "139", Cartridge_type: 2 ...}。

为什么 ngOptions 中的预选选项不起作用？选择呈现空选项，就好像 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作为cartridge_type.name，它在选择中期望id，但在ng-init中您提供了完整的对象(cartridgeTypeScope[0])。 所以它不会选择您的选项值。

或者你也可以这样做 您可以使用相同的 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"

希望有帮助:)

更新

对于 Controller 默认选项，您需要执行

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

UPADTE 2:- 对于 $http:-

Plunker