【发布时间】：2016-09-07 13:48:37
【问题描述】：
目前，我正在尝试更熟悉 AngularJS 和单页应用程序。我觉得我正在取得一些进展，我觉得这很有力量，因为我发现 WPF 相对令人困惑。
但是，我觉得我对 AngularJS 应该做什么有一个严重的误解。为了更简单地表达我的问题，我构建了一个基本的示例网站，以便我可以练习。
网站的格式类似于汽水产品的菜单，用户可以在其中选择不同的供应商，然后选择可用的尺寸来查看产品的价格。这只是举例，价格和尺寸（IE，网页上显示的数据）并不正确。正确的是我显示此类信息的方法和格式。
我的问题是我似乎无法从我的模板 URL 访问范围的“selectedVendor”ng-model（或者至少不是“传统的”IE，只需输入名称）。这会破坏我的代码，因为我需要从选择的供应商处获取可用尺寸的列表。
我查看了其他几个类似的问题，但提供的所有答案似乎都指向 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>
目前，我的网页能够在供应商和价格单位之间进行选择。但是，我无法查看或选择尺码，因此永远不会填写价格字段。谁能指出我正确的方向？我不在乎是否需要重组任何东西，我只想以正确的方式学习这一点，或者以最简洁的方式来获得最大的组织性和可扩展性。
提前致谢！
【问题讨论】：
-
我没有。我是不是该？我以为控制器指令是在 .state('home',{ url: '/home', templateUrl: 'beverages_home.html', controller: 'beveragesController' })
-
抱歉，在提交评论的 cmets 部分还是习惯了回车。我的错！
-
是的。我现在看到你在路线上有它。我会删除我的评论。
-
我会看看 angular styleguide，谢谢！
-
不是一个解决方案，但为了学习“最干净的方法”，我建议查看angular styleguide。特别是你应该避免访问$scope directly并减少nested code。
标签： javascript angularjs html-table html-select single-page-application