我有一个 .json 文件，其中包含奶牛列表，其中包含每头奶牛居住地点的详细信息。
我有两个面板。
一个面板显示奶牛列表，我使用 ng-repeat 显示此列表。
当点击牛的标题时，会出现第二个面板，这一切都很棒并且有效。然而，我无法弄清楚如何通过那头特定牛的位置。是否可以通过grab并传递cow数组中的数字？我尝试过传递 {{'cow'}} ，认为这将代表数组 id，但我认为我没有走在正确的轨道上，所以我想在这里发布。
有什么方法可以传递数据，以便只显示点击的牛的位置吗？我需要调用 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从提交的答案中添加了内容(谢谢)，但尚未使其正常工作。当点击“安格斯英国”时。我的目标是让该段落说“这个安格斯住在英国”——目前还没有。再次感谢您的帮助。
最佳答案
您只需传入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>
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;
};
}
或者如果你想传入迭代牛的索引
<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];
};
}
关于javascript - 通过点击 angularjs 传递数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31706535/