pass data via on-click angularjs

Question

I have a .json file with a list of cows with details about where each one lives.

I have two panels.

One panel displays the list of cows and I have this displayed using ng-repeat.

The second panel appears when the title of the cow is clicked on, which is all great and working. However I can't seam to work out how to pass the location of that particular cow. Is it possible to pass grab and pass the number in the cow array? I've tried passing {{'cow'}} thinking that this would represent the array id but I don't think I'm on the right track so thought I'd post up here.

Is there any way to pass the data so that only the location of the cow clicked shows up? Do I need to call a promise or something?

Thanks - code below of where I am so far

HTML

<html ng-app="animalApp">
<section ng-controller="AnimalController as animalCtrl">
<ul ng-controller="PanelController as panel">
  <li ng-class="{ active: panel.isSelected(1)}" ng-show="panel.isSelected(1)">
    <ul>
      <li ng-repeat="cow in animalCtrl.cows">
        <h2>
          <a href="" data-ng-bind="cow.name" ng-click="panel.selectTab(2); cowId({{cow}})"></a>
        </h2>
      </li>
    </ul>
  </li>
  <li ng-class="{ active: panel.isSelected(2)}" ng-show="panel.isSelected(2)">
    <p>This {{animalCtrl.cow.name}} lives in {{animalCtrl.cow.country}}</p>
    <a href="" ng-click="panel.selectTab(1)">Back to all cows</a>
  </li>
</ul> 
</section>
</html>

JS

var app = angular.module('animalApp', [ ]);

app.controller('AnimalController', ['$http', '$scope',function($http, $scope){
    var type = this;
    type.cows = [ ];
    $http.get('animals.json').success(function(data){
        type.cows = data;
    });

app.controller("PanelController", function() {
    this.tab = 1;
    this.selectTab = function(setTab) {
        this.tab = setTab;
    };
    this.isSelected = function(checkTab) {
        return this.tab === checkTab;   
    }
});

JSON

[
   {
        "name": "Angus",
        "country": "UK"
   },
   {
        "name": "Hereford",
        "country": "Canada"
   },
   {
        "name": "Dwarf Lulu",
        "country": "Nepal"
   },
   {
        "name": "Ongole",
        "country": "India"
   }
]

Here is a PLUNKER with the additions from the submitted answers(thanks) but yet to still get it to work. When clicking on 'Angus UK. I'm aiming to have the paragraph say 'This Angus lives in UK' - which is currently does not. Thanks again for the help.

share your json structure please .

Vineet
– Vineet

2015-07-29 16:53:56 +00:00
Commented Jul 29, 2015 at 16:53 — Vineet
– Vineet, Commented Jul 29, 2015 at 16:53

Teliren · Accepted Answer · 2015-07-29 22:23:31Z

3

You can just pass in cow. Based on your code, this seems to be what you want.

<li ng-repeat="cow in animalCtrl.cows">
    <h2>
      <a href="" data-ng-bind="cow.name" ng-click="panel.selectTab(2); animalCtrl.cowId(cow)"></a>
    </h2>
  </li>

controller

app.controller('AnimalController', ['$http', '$scope',function($http, $scope){
    var type = this;
    type.cows = [ ];
    $http.get('animals.json').success(function(data){
        type.cows = data;
    });
    type.cowId = function(cow){
        this.cow = cow;
    };
}

or if you wanted to pass in the index of the iterated cow

<li ng-repeat="cow in animalCtrl.cows">
    <h2>
      <a href="" data-ng-bind="cow.name" ng-click="panel.selectTab(2); animalCtrl.cowId($index)"></a>
    </h2>
  </li>

controller

app.controller('AnimalController', ['$http', '$scope',function($http, $scope){
    var type = this;
    type.cows = [ ];
    $http.get('animals.json').success(function(data){
        type.cows = data;
    });
    type.cowId = function(id){
        this.cow = type.cows[id];
    };
}

Plunkr

edited Jul 29, 2015 at 22:23

answered Jul 29, 2015 at 17:13

Teliren

3421 silver badge5 bronze badges

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

5 Comments

fidev Over a year ago

ok, thanks - but i haven't set up a cowId function as wasn't sure how to this part... I've tried something like this in my app.js this.cowId = function(id) {this.cow = id;}. Then iterating {{id}} but with no luck..

fidev Over a year ago

Thanks but still not getting anything displaying and I've changed ` <p>This {{animalCtrl.cow.name}} lives in {{animalCtrl.cow.country}}</p>` to <p>This {{cow.name}} lives in {{cow.country}}</p>` in the second panel but still nothing shows up.

fidev Over a year ago

I have added a Plunker in my original post with the above additions but still unable to get anything to appear though. @teliren

fidev Over a year ago

@Barett added a plunker

Teliren Over a year ago

@fidev animalCtrl.cowId(cow) added plunkr

Collectives™ on Stack Overflow

pass data via on-click angularjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related