現在、私はAngularJSとシングルページアプリケーションについてもっと知りたいと思っています。私はWPFが比較的混乱していることがわかったので、私は力を発揮していると思う。AngularJS：選択内容からテーブル内容を更新する
しかし、私はAngularJSが何をすべきかについて重大な誤解を感じているように感じます。私の質問をもっと単純に枠に入れるために、私は実践できるように、基本的なサンプルウェブサイトを構築しました。
ウェブサイトはソーダ製品用のメニューのようにフォーマットされています。ソーダ製品の場合、ユーザーはさまざまなベンダーを選択でき、次に使用可能なサイズで製品の価格を表示できます。これは、例えば、価格やサイズ（IE、Webページに表示されるデータ）が正しいことを意図したものではありません。そのような情報を表示するための方法とフォーマットです。
私の問題は、私のテンプレートのURLからスコープの "selectedVendor" ng-modelにアクセスできないようです（または、単に名前を入力するだけで、 "伝統的に" 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>
、私のウェブページは販売の間で選択することができますと価格単位。しかし、私はサイズを見たり選択することができません。そのため、価格フィールドは決して満たされません。誰かが私を正しい方向に向けることができますか？私は何かを再構成しなければならないかどうか気にしない、私はちょうどこれを正しい方法、または最も組織とスケーラビリティに役立つ最もクリーンな方法を学びたいと思います。
ありがとうございます！
私はしません。したほうがいい？私は（{： '/ホーム'、 templateUrl： 'beverages_home.html'、 コントローラ： URL 'beveragesController' }、 'ホーム'）コントローラディレクティブが.stateに指定されたと思っ –
申し訳ありませんが、まだ慣れますコメントを提出するコメント欄に復帰してください。私の悪い！ –
はい。私は今あなたがそれをルートに持っているのを見る。私は私のコメントを削除します。 –