使用角度 JS 和离子从选择中获取选定的选项

Question

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

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

生成的 Json Structured

[
    {
        "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 代替，因为它使用相同的范围，您的代码应该可以完美运行。

Answer 2

使用ng-show 会起作用，但如果您要为ng-model 处理dot rule，也可以使用ng-if。

如果您将selectedItem 添加到product 对象，您的ng-if 标记将按预期工作。您选择的ng-model 类似于ng-model="product.selectedItem"。

请看下面的演示或jsfiddle。

var jsonData = [
    {
        "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"
    }
];

angular.module('demoApp', ['ionic'])
.controller('productsCtrl', function($scope, $http, $stateParams) {
    $scope.product = {
        selectedItem: {}
    };
    //$http.get('service.php')
    //.success(function (response) {
      //http just removed for the demo
        $scope.products = jsonData;//response;
    //});
});

<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
<link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet"/>
<ion-view ng-app="demoApp" ng-controller="productsCtrl" view-title="Products">
    <ion-content>
        <ion-list>
            <ion-item style="background-image: url({{product.main_image}})" 
            ng-repeat="product in products" class="productListItem" ng-init="product.selectedItem = product.Variante[0]">
                <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="product.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">
                    {{product.selectedItem.Prix | currency}}
                </h2>
                <h2 class="h2Price" ng-if="product.Variante.length == 1">
                    {{product.Variante[0].Prix | currency}}
                </h2>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>