选定的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