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：从选择选项更新表格内容

回答

相关问题