选定的ng-option与它的数据不匹配，并且出现空选项问题

Question

I'm trying to render the contents of a scope variable in AngularJS. 我正在尝试在AngularJS中渲染范围变量的内容。 This is my code. 这是我的代码。

<!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>

There are three problems i am seeing with above code. 我在上面的代码中看到三个问题。

Initially select box is showing second option as selected and also 1 option as blank entry. 最初，选择框显示第二个选项被选中，还有一个选项作为空白条目。 Though blank entry disappears as soon as i chooses any option in the list. 虽然空白条目会在我在列表中选择任何选项时消失。 But i want first option of select box to be selelected by default and there is no blank option in list when page loads. 但是我希望默认情况下会选择选择框的第一个选项，并且在页面加载时列表中没有空白选项。
When i'm selecting new option in the list, its price is not getting change. 当我在列表中选择新选项时，其价格不变。 How to do that? 怎么做？
At the time of loading option is selected second one, but price of first is displaying. 在加载时选择了第二个，但第一个的价格正在显示。 How to fix this bug? 如何解决这个错误？

Any help will be highly appreciated. 任何帮助将不胜感激。

Answer 1

Use ng-options which will bind the object to the value. 使用ng-options将对象绑定到值。

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

DEMO 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