CODEWITHSUNDEEP
javascripthtmlangularjsyeomanangularjs-ng-click
John Abraham
John Abraham

Reputation: 18831

Set and Display current Data on ng-click?

I'm using Yeoman - angular generator.
JSBin: JSBin Link

I have a simple list of airports being set from a factory angApp.factory("Airports", function() {}); and displayed from ng-repeat <ul ng-repeat="airport in airports.detail">.

enter image description here

I would like to have an interaction that when each link is clicked it will match the airport code and display it in a new paragraph tag <p class="current">Current: {{currentAirport.name}}</p>.

Why wont the setAirport(airport.code) function set the currentAirport.name(or display?) when airport link is clicked in html?

Controller

angular.module("ang6App")
  .controller("AirportsCtrl", function ($scope, Airports) {
    $scope.formURL = "views/_form.html";
    $scope.currentAirport = null;
    $scope.airports = Airports;
    $scope.setAirport = function(code) {
      $scope.currentAirport = $scope.airports[code];
    };

  });

Factory Service in the same module

angApp.factory("Airports", function() {
    var Airports = {};
    Airports.detail = {
        "PDX": {
          "code": "PDX",
          "name": "Portland International Airport",
          "city": "Portland",
          "destinations": [
            "LAX",
            "SFO"
          ]
        },
        "STL": {
          "code": "STL",
          "name": "Lambert-St. Louis International Airport",
          "city": "St. Louis",
          "destinations": [
            "LAX",
            "MKE"
          ]
        },
        "MCI": {
          "code": "MCI",
          "name": "Kansas City International Airport",
          "city": "Kansas City",
          "destinations": [
            "LAX",
            "DFW"
          ]
        }
      };
    return Airports;
});

HTML 

<div class="container" ng-controller="AirportsCtrl">
  <ul ng-repeat="airport in airports.detail">
    <li><a href="" ng-click="setAirport(airport.code)">{{airport.code}}</a> -- {{airport.city}} </li>
  </ul>
  <p class="current"> current: {{currentAirport.name}}</p>
</div>

Upvotes: 0

Views: 168

Answers (1)

Stewie
Stewie

Reputation: 60416

Your setAirport function should be written as:

$scope.setAirport = function (code) {
  $scope.currentAirport = $scope.airports.detail[code];
};

But then, this could be simplified by passing the actual airport object directly:

<a href ng-click="setAirport(airport)">{{airport.code}}</a>

$scope.setAirport = function (airport) {
  $scope.currentAirport = airport;
};

Upvotes: 2

Related Questions