選定的ng-option與它的數據不匹配，並且出現空選項問題

Question

我正在嘗試在AngularJS中渲染范圍變量的內容。 這是我的代碼。

<!doctype html>
<html ng-app="myApp">
<head>
    <title> AngularJS Tabs</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <style>

        .box {
            margin : 5px;
            display : inline-block;
            width: 150px;
            height: 250px;
            background-color: grey;
            text-align:center;
            vertical-align: top;
        }

    </style>
</head>

<body>

    <div ng-controller="myCtrl">
        <div class='box' ng-repeat="product in Products">
            <br>
            <b>{{product.BrandName}}</b>
            <br>
            {{product.ProductName}}
            <br><br>
            <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img>
            <br>
            <br>

            <select ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant">
                <option ng-selected="SelectedVariant"
                    ng-repeat="variant in product.Variants"
                    value="{{variant.VariantID}}">
                    {{variant.VariantName}}
                </option>
            </select>

            <br>

            <strike> {{SelectedVariant.MRP}} </strike> {{SelectedVariant.SellPrice}}

            <br>
            <button> Add to Cart </button>

        </div>

    </div>


    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.Products = [
                                {
                                    "ProductID": "12",
                                    "ProductName": "Green Detergent Bar",
                                    "ProductImagePath": "/images/12.png",
                                    "SubCategoryID": "1",
                                    "SubCategoryName": "DetergentBar",
                                    "BrandID": "1",
                                    "BrandName": "Wheel",
                                    "Variants": [
                                        {
                                            "VariantID": "1",
                                            "VariantName": "500GM",
                                            "VariantImagePath": "/images/12_1.png",
                                            "MRP": "20.00",
                                            "SellPrice": "19.50"
                                        },
                                        {
                                            "VariantID": "2",
                                            "VariantName": "1KG",
                                            "VariantImagePath": "/images/12_2.png",
                                            "MRP": "40.00",
                                            "SellPrice": "38.00"
                                        }
                                    ]
                                },
                                {
                                    "ProductID": "13",
                                    "ProductName": "Amla Hair Oil",
                                    "ProductImagePath": "/images/13.png",
                                    "SubCategoryID": "2",
                                    "SubCategoryName": "HairOil",
                                    "BrandID": "2",
                                    "BrandName": "Dabur",
                                    "Variants": [
                                        {
                                            "VariantID": "3",
                                            "VariantName": "100ML",
                                            "VariantImagePath": "/images/13_3.png",
                                            "MRP": "30.00",
                                            "SellPrice": "29.50"
                                        },
                                        {
                                            "VariantID": "4",
                                            "VariantName": "200ML",
                                            "VariantImagePath": "/images/13_4.png",
                                            "MRP": "60.00",
                                            "SellPrice": "58.00"
                                        }
                                    ]
                                }
                            ];
        });
    </script>

</body>
</html>

我在上面的代碼中看到三個問題。

最初，選擇框顯示第二個選項被選中，還有一個選項作為空白條目。 雖然空白條目會在我在列表中選擇任何選項時消失。 但是我希望默認情況下會選擇選擇框的第一個選項，並且在頁面加載時列表中沒有空白選項。
當我在列表中選擇新選項時，其價格不變。 怎么做？
在加載時選擇了第二個，但第一個的價格正在顯示。 如何解決這個錯誤？

任何幫助將不勝感激。

Answer 1

使用ng-options將對象綁定到值。

<select ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants"></select>

DEMO

選定的ng-option與它的數據不匹配，並且出現空選項問題

問題描述

1 個解決方案

解決方案1
1 已采納 2015-04-02 09:56:42

選定的ng-option與它的數據不匹配，並且出現空選項問題

問題描述

1 個解決方案

解決方案1 1 已采納 2015-04-02 09:56:42

解決方案1
1 已采納 2015-04-02 09:56:42