Click on a value in an array of objects returns the value of another key AngularJS

Question

I have an array of objects iterated over in a list. If I click on the name, it should alert me with the value of the city the name corresponds to.

<div ng-app='myApp'>
    <div ng-controller="AppController">
      <div ng-click="getCity()" ng-repeat="step in steps">
        <p> {{step.name}}</p> 
    </div>
</div>

var myApp = angular.module('myApp', []);
myApp.controller('AppController', function ($scope) {
    $scope.steps = [
        {name: "ABC", status: true, city: "Boston"},
        {name: "DEF", status: true, city: "New York"},
        {name: "GHI", status: true, city: "LA"}
];

        $scope.getCity = function(a) {

    }
});

Detailed code here.

--> So I click on "ABC" and "Boston" should be shown to me.

Appreciate the help. Thanks.

I've answered, but in future you should really tell us what you've tried and what didn't work. If you've tried nothing then you can easily find the answer in the AngularJS docs. — UncleDave
– UncleDave, Commented Oct 11, 2017 at 15:52

UncleDave · Accepted Answer · 2017-10-11 16:13:27Z

2

You can pass a value to your getCity function:

var myApp = angular.module('myApp', []);
myApp.controller('AppController', function($scope) {
  $scope.steps = [{
      name: "ABC",
      status: true,
      city: "Boston"
    },
    {
      name: "DEF",
      status: true,
      city: "New York"
    },
    {
      name: "GHI",
      status: true,
      city: "LA"
    }
  ];

  $scope.getCity = function(step) {
    alert(step.city)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
  <div ng-controller="AppController">
    <div ng-click="getCity(step)" ng-repeat="step in steps">
      <p> {{step.name}}</p>
    </div>
  </div>
</div>

edited Oct 11, 2017 at 16:13

answered Oct 11, 2017 at 15:51

UncleDave

7,2492 gold badges29 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

Click on a value in an array of objects returns the value of another key 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