javascript - AngularJS: Updating table contents from Select option -
currently, trying more acquainted angularjs , single page applications. feel making headway, find empowering, since found wpf relatively confusing.
however, feel having grave misunderstanding of angularjs supposed do. frame question more simply, have constructed basic example website can practice.
the website formatted menu soda products user can select different vendors, , available sizes view price of product. example , prices , sizes (ie, data displayed on web page) not meant correct. meant correct method , format displaying such information.
my problem cannot seem access scope's "selectedvendor" ng-model template url (or @ least not "traditionally" i.e., typing name). breaks code need list of available sizes vendor has been selected.
i looked through several other similar questions, answers provided seemed point ng-repeat option being offending party. sorry if duplicate.
here code:
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 vendor.name vendor in vendors" ng-init="selectedvendor = vendors[0]"></select></td> <td><select ng-model="selectedsize" ng-options="size size.size size in selectedvendor.sizes" ng-init="selectedsize = vendors[0].sizes[0]"></select></td> <td><select ng-model="selectedunits" ng-options="unit 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> currently, have web page able select between vendors , price units. however, not able see or select size, , because of price field never filled. can point me in correct direction? don't care if have restructure anything, learn correct way, or cleanest way lends organization , scalability.
thanks in advance!
i think problems comes because sizes not arry rather object, therefore cannot access way trying. try array of sizes instead!
Comments
Post a Comment