CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-click
fidev
fidev

Reputation: 1252

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.

Upvotes: 0

Views: 658

Answers (1)

Teliren
Teliren

Reputation: 342

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

Upvotes: 3

Related Questions