pass data via on-click angularjs

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.

Answers


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


Need Your Help

how to synch flash facebook app with facebook servers

flash facebook-graph-api facebook-javascript-sdk facebook-as3-api

I am using as3-fb-api which connects to js-api for a flash app. it works fine: login, get friends profile pics, logout, repeat.

Does Googlebot Index CSS Background Images?

seo search-engine background-image googlebot

I have a page that displays images as background images, defined via css, to div elements. These images do not load dynamically via js, they are there on page load. Without getting into why it was