選擇ng-option與其數據和空選項問題不匹配

我想在AngularJS中呈現作用域變量的內容。這是我的代碼。選擇ng-option與其數據和空選項問題不匹配

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

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

最初選擇框顯示第二個選項爲選中，並且還有1個選項作爲空白條目。儘管在我選擇列表中的任何選項時，空白條目就會消失。但我希望默認選擇框的第一個選項，並且頁面加載時列表中沒有空白選項。
當我在列表中選擇新選項時，其價格沒有變化。怎麼做？
加載選項時選擇第二個，但第一個的價格顯示。如何解決這個錯誤？

任何幫助將不勝感激。

來源

2015-04-02 Devesh Agrawal

變化值= 「{{variant.VariantID}}」在選項標籤值= 「{{變種}}」來解決問題2 – Anita 2015-04-02 09:55:15

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

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

DEMO

來源

2015-04-02 09:56:42 mohamedrias

你的建議，解決了所有的問題：）非常感謝。 – 2015-04-02 09:58:55

選擇ng-option與其數據和空選項問題不匹配

回答

相關問題