AngularJSのデータを表示する際に問題が発生しました

Question

ユーザーが1か月を選択してから、ページにフライフィッシングのように適切なフライを表示する小さなanglejsアプリケーションを作成しました。私は仕事の一部を得ることができますが、他の仕事はできません。作業中の部分：ユーザが月を選択すると、アプリケーションは正しいフライを使用して表示します。その部分は機能していません：私はディスプレイのテキストに「フライの名前はここにあります。」と言っています。

私が前に言ったことを繰り返し、私が表示したいものの第2部はです。私は正しいフライ名を得る。それは私が理解できない選択された月を繰り返すことを望む最初の部分です。ありがとうございました。

JS

angular.module('myApp', ['ngRoute']) 

.config(['$routeProvider', function($routeProvider){ 
    $routeProvider 
     .when('/home', { 
      templateUrl: 'views/home.html', 
      controller: 'myController' 
     }) 
     .when('/directory', { 
      templateUrl: 'views/directory.html', 
      //since this page requires a controller 
      controller: 'myController' 
     }) 
     .otherwise({ 
      redirectTo: '/home' 
     }); 

}]); //.config 


angular.module('myApp') 
    .controller('myController', function($scope) { 
     $scope.dir_message = ("This is the directory page."); 
     $scope.months = [{monthName: 'January', flyName: 'Clouser Deep Minnow' },{ monthName: 'February', flyName: 'Woolly Bugger' },{ monthName: 'March', flyName: 'Zonker' }];  
}); 

HTML

<p>Select a Month.</p> 

<div ng-app="myApp"> 
     <select ng-model="selectedItem"> 
     <option ng-repeat="month in months" value="{{month.flyName}}">{{month.monthName}}</option> 
     </select> 

<div ng-model="month"> 
     <p>The correct fly to use for {{month.monthName}} is : {{selectedItem}}</p> 
</div> 

</div> 

Answer 1

使用NG-オプションの代わりに、NG-繰り返します。これにより月オブジェクト（その名前とフライ名）をselectedItemプロパティにバインドすることができます。

<select ng-model="selectedItem" ng-options="month as month.monthName for month in months"> 
    <option value=""></option> 
    </select> 

    <p>The correct fly to use for {{ selectedItem.monthName}} is : {{ selectedItem.flyName }}</p> 

divのng-modelは意味をなさないことに注意してください。