Trouble displaying data in AngularJS

Question

I made a small angularjs application where the user picks a month and then the page displays the appropriate fly (as in fly fishing) to use. I can get part of it to work but not the other. Part that is working: when the user selects a month the app does display the correct fly to use. Part that is not working: I would like the display text to read: "The correct fly to use for [month name goes here] is : [name of fly goes here]."

Repeating what I said earlier, the second part of what I want displayed is working. I do get the correct fly name. It is the first part where I want it to repeat the selected month that I cannot figure out. Thank you.

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>

JB Nizet · Accepted Answer · 2016-10-28 17:40:25Z

1

Use ng-options instead of ng-repeat. That will allow binding a month object (with its name and its fly name) to the selectedItem property.

  <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>

Note than ng-model on a div makes no sense.

answered Oct 28, 2016 at 17:40

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trouble displaying data in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related