AngularJS：從選擇選項更新表格內容

目前，我正在嘗試更加熟悉AngularJS和單頁面應用程序。我覺得我正在取得一些進展，我發現它有所幫助，因爲我發現WPF比較混亂。AngularJS：從選擇選項更新表格內容

但是，我覺得我對AngularJS應該做的事有嚴重的誤解。爲了更簡單地構建我的問題，我構建了一個基本示例網站，以便我可以練習。

該網站的格式與蘇打水產品菜單一樣，用戶可以選擇不同的供應商，然後選擇可用的尺寸查看產品的價格。這僅僅是一個例子，並且價格和尺寸（IE，顯示在網頁上的數據）並不意味着是正確的。什麼是正確的是我的方法和顯示這些信息的格式。

我的問題是，我似乎無法從我的模板URL（或者至少不是「傳統的」I.E.，通過簡單地輸入名稱）訪問範圍的「selectedVendor」ng模型。這會打破我的代碼，因爲我需要從已選擇的供應商處獲取可用大小的列表。

我翻了幾個其他類似的問題，但提供的答案似乎都指向ng-repeat選項是違規方。對不起，如果這是重複的。

這裏是我的代碼：

的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Menu - Beverages</title> 
     <script src="http://code.angularjs.org/1.2.13/angular.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> 
     <script src="app.js"></script> 
    </head> 
    <body ng-app="routerApp"> 
     <div id="main"> 
      <div ui-view></div> 
     </div> 
    </body> 
</html>

app.js：

var routerApp = angular.module('routerApp', ['ui.router']).run(['$rootScope', '$state', function($rootScope, $state){$rootScope.$state = $state;}]); 

routerApp.config(function($stateProvider, $urlRouterProvider){ 
    $urlRouterProvider.otherwise('/home') 
    $stateProvider 

    .state('home',{ 
     url: '/home', 
     templateUrl: 'beverages_home.html', 
     controller: 'beveragesController' 
    }) 
}) 
routerApp.controller('beveragesController', function($scope){ 
    $scope.vendors=[ 
     { 
      Name: 'Pepsi-Cola', 
      Sizes:{ 
       Small:{ 
        Size:'8oz', 
        Price:'0.50' 
       }, 
       Medium:{ 
        Size:'16oz', 
        Price:'1.50' 
       }, 
       Large:{ 
        Size:'24oz', 
        Price:'2.50' 
       } 
      } 
     }, 
     { 
      Name: 'Coke', 
      Sizes:{ 
       Small:{ 
        Size:'Teaspoon', 
        Price:'4.50' 
       }, 
       Medium:{ 
        Size:'Tablespoon', 
        Price:'8.50' 
       }, 
       Large:{ 
        Size:'Quart', 
        Price:'25.50' 
       } 
      } 
     }, 
     { 
      Name: 'A&W', 
      Sizes:{ 
       Small:{ 
        Size:'Half Gallon', 
        Price:'0.25' 
       }, 
       Medium:{ 
        Size:'1 Liter', 
        Price:'1.00' 
       }, 
       Large:{ 
        Size:'2 Liter', 
        Price:'1.25' 
       } 
      } 
     } 
    ] 
    $scope.units=[ 'Dollars', 'Euro', 'Yen' 
    ] 
})

beverages_home.html：

<table> 
    <tr> 
     <th>Vendor</th> 
     <th>Size</th> 
     <th>Price</th> 
    </tr> 
    <tr> 
     <td><select ng-model="selectedVendor" ng-options="vendor as vendor.Name for vendor in vendors" ng-init="selectedVendor = vendors[0]"></select></td> 
     <td><select ng-model="selectedSize" ng-options="size as size.Size for size in selectedVendor.Sizes" ng-init="selectedSize = vendors[0].Sizes[0]"></select></td> 
     <td><select ng-model="selectedUnits" ng-options="unit for unit in units" ng-init="selectedUnits = units[0]"></select></td> 
    </tr> 
    <tr> 
     <td>{{selectedVendor.Name}}</td> 
     <td>{{selectedSize.Size}}</td> 
     <td>{{selectedSize.Price}} {{selectedUnits}}</td> 
    </tr> 
</table>

目前，我有我的網頁可以在購物之間進行選擇或價格單位。但是，我無法查看或選擇尺寸，並且因爲價格字段從未填充過。任何人都可以指出我正確的方向嗎？我不在乎是否需要重組任何東西，我只想以正確的方式學習這一點，或者爲最具組織性和可伸縮性的最乾淨的方法。

在此先感謝！

來源

2016-09-07 Tyler Gubala

我不知道。我是不是該？我認爲控制器指令是在.state中指定的（'home'，'/ home'， templateUrl：'beverages_home.html'， controller：'drinksController' }） –

對不起，仍在使用在提交評論的評論部分回車。我的錯！ –

是的。我現在看到你在路線上。我會刪除我的評論。 –

我認爲你的問題出現了，因爲尺寸不是一個瑣事，而是一個對象，因此你不能訪問你正在嘗試的方式。請嘗試使用一系列尺寸！

來源

2016-09-07 14:09:59 yhabib

即大小：[ 小：{ 尺寸： '8盎司'，價格： '0.50' }，中：{ 尺寸： '16盎司'，價格： '1.50' }，大：{ 尺寸： '24oz'，價格：'2.50' } ] –

這對我有效。剛開始學習JS和angular時，我認爲我可以遍歷一個容器對象的屬性，但是這個解決方案很明顯地說明了爲什麼情況並非如此，以及我的缺點在哪裏。我實際上認爲我正在製作一個陣列，看起來我在我之前有很多閱讀。謝謝一堆！ –

AngularJS：從選擇選項更新表格內容

回答

相關問題