javascript - 使用 angular JS 和 ionic 从 select 中获取选定的选项

Question

我在 Angular Js 上的 select 有一些问题，我搜索了很多并找到了一些解决方案但没有用。

我有一个类似从我的 service.php

生成的 Json 结构

[
    {
        "Name": "Name1",
        "Variante": [
            {
                "Prix": "79.00",
                "Name": "20 Piéces"
            }
        ],
        "Description": "",
        "main_image": "images/products/DSC_0192.jpg"
    },
    {
        "Name": "NAME2",
        "Variante": [
            {
                "Prix": "39.00",
                "Name": "250g"
            },
            {
                "Prix": "60.00",
                "Name": "500g"
            }
        ],
    "Description": "",
    "main_image": "images/products/DSC_0125.jpg"
    }
]

这是我的 controller.js

.controller('productsCtrl', function($scope, $http, $stateParams) {
    $http.get('service.php')
    .success(function (response) {
        $scope.products = response;
    });
});

这是我的products.html

<ion-view view-title="Products">
    <ion-content>
        <ion-list>
            <ion-item style="background-image: url({{product.main_image}})" 
            ng-repeat="product in products" class="productListItem">
                <h2 class="h2Name">{{product.Name}}</h2>

                <button class="button button-balanced button-right">
                    <i class="icon ion-ios-cart"></i>
                </button>

                <select class="Variantes" 
                    ng-if="product.Variante.length > 1" 
                    ng-model="selectedItem"
                    ng-options="variant.Name for variant in product.Variante">
                </select>

                <h2 class="Variantes" ng-if="product.Variante.length == 1">
                    {{product.Variante[0].Name}}
                </h2>
                <h2 class="h2Price" ng-if="product.Variante.length > 1">
                    {{selectedItem.Prix}}
                </h2>
                <h2 class="h2Price" ng-if="product.Variante.length == 1">
                    {{product.Variante[0].Prix}}
                </h2>

            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

如果我有多个 Variante，我希望在更改选择框时能够更改价格 (Prix) 值。但它不起作用。

需要任何帮助!!

谢谢

Answer 1

您遇到的问题是由 ng-if 引起的。它创建一个单独的范围，使用 ng-show 代替，因为它使用相同的范围并且您的代码应该可以完美运行。