selected ng-option is not matching with its data and empty option issue

Question

I'm trying to render the contents of a scope variable in 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.

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

DEMO

selected ng-option is not matching with its data and empty option issue

Question

1 answers

solution1
1 ACCPTED 2015-04-02 09:56:42

selected ng-option is not matching with its data and empty option issue

Question

1 answers

solution1 1 ACCPTED 2015-04-02 09:56:42

solution1
1 ACCPTED 2015-04-02 09:56:42