通过 on-click angularjs 传递数据

Question

我有一个 .json 文件，其中包含奶牛列表以及每头奶牛生活地点的详细信息。

我有两个面板。

一个面板显示奶牛列表，我使用 ng-repeat 来显示它。

单击牛的标题时会出现第二个面板，这一切都很棒并且可以正常工作。但是，我无法弄清楚如何传递那头特定母牛的位置。是否可以通过grab和cow数组中的数字来传递？我试过传递 {{'cow'}} 认为这将代表数组 id 但我不认为我在正确的轨道上所以认为我会 post 在这里。

有什么方法可以传递数据，只显示点击的牛的位置吗？我需要调用 promise 什么的吗？

谢谢 - 下面是我目前所处位置的代码

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"
   }
]

这是一个 PLUNKER，其中添加了提交的答案（谢谢），但仍然无法正常工作。单击“英国安格斯”时。我的目标是让段落说 'This Angus lives in UK' - 目前没有。再次感谢您的帮助。

Answer 1

你可以直接传入cow。根据您的代码，这似乎是您想要的。

<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>

控制器

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;
    };
}

或者如果你想传入迭代牛的索引

<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>

控制器

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

通过 on-click angularjs 传递数据

pass data via on-click angularjs

javascript

angularjs

angularjs-ng-click