Question

目前，我正在尝试更多地了解AngularJS和单页应用程序。我觉得自己正在取得一些进展，我发现这一点有所增强，因为我发现WPF相对令人困惑。

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

网站的格式类似于苏打产品的菜单，用户可以选择不同的供应商，然后选择可用的尺寸来查看产品的价格。这仅仅是例如，价格和尺寸（IE，网页上显示的数据）并不正确。什么是正确的是我显示这些信息的方法和格式。

我的问题是我似乎无法访问范围＆＃34; selectedVendor＆＃34;来自我的模板URL的ng-model（或者至少不是＆＃34;传统上＆＃34; I.E.，只需输入名称）。这打破了我的代码，因为我需要从选择的供应商处获取可用尺寸列表。

我查看了其他几个类似的问题，但所提供的答案似乎都指向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>

目前，我的网页可以在供应商和价格单位之间进行选择。但是，我无法查看或选择尺寸，因此价格字段永远不会被填充。谁能指出我正确的方向？我不在乎是否需要对任何内容进行重组，我只想以正确的方式了解这一点，或者以最简洁的方式为大多数组织和可扩展性提供帮助。

提前致谢！

Answer 1

我认为你的问题是因为Sizes不是一个arry而是一个对象，因此你无法访问你正在尝试的方式。尝试使用一系列尺寸！

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

1 个答案: