AngularJS：从“选择”选项更新表内容

Question

目前，我正在尝试使AngularJS和单页应用程序更加熟悉。 我感觉自己正在取得一些进展，我感到很权能，因为我发现WPF相对令人困惑。

但是，我觉得我对AngularJS应该做的事情有严重的误解。 为了简化我的问题，我构建了一个基本的示例网站，以便我练习。

该网站的格式类似于纯碱产品的菜单，用户可以在其中选择不同的供应商，然后选择可用的尺寸来查看产品的价格。 这仅是举例，价格和大小（即，网页上显示的数据）并不正确。 正确的是我显示这些信息的方法和格式。

我的问题是，我似乎无法从模板URL（或者至少不是“传统地” IE，只需输入名称）访问范围的“ 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'
    ]
})

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

目前，我的网页能够在供应商和价格单位之间进行选择。 但是，我无法查看或选择尺寸，因此，价格字段从未填满。 谁能指出我正确的方向？ 我不在乎是否必须进行任何重组，我只是想学习此正确方法，或者是最适合大多数组织和可伸缩性的最简洁方法。

提前致谢！

Answer 1

我认为您的问题来了，因为Sizes并不是麻烦，而是对象，因此您无法访问尝试的方式。 尝试使用一系列尺寸！

AngularJS：从“选择”选项更新表内容

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-09-07 14:09:59

AngularJS：从“选择”选项更新表内容

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-09-07 14:09:59

解决方案1
1 已采纳 2016-09-07 14:09:59