单击如何在AngularJS中逐个循环使用JSON

创建我的第一个指令作为角度制作练习或多或少的自定义轮播，以了解指令如何工作。

我用一些JSON数据设置了一个Factory：

directiveApp.factory("Actors", function(){ var Actors = {}; Actors.detail = { "1": { "name": "Russel Brand", "profession": "Actor", "yoga": [ "Bikram", "Hatha", "Vinyasa" ] }, "2": { "name": "Aaron Bielefeldt", "profession": "Ambassador", "yoga": [ "Bikram", "Hatha", "Vinyasa" ] }, "3": { "name": "Adrienne Hengels", "profession": "Ambassador", "yoga": [ "Bikram", "Hatha", "Vinyasa" ] } }; return Actors; }); 

和演员控制器：

 function actorsCtrl($scope, Actors) { $scope.actors = Actors; } 

并使用ng-repeat显示模型数据：

 
 
 
{{actor.name}} 
 
 
Next Actor
  

1）我如何只在角度模型actors.detail的第一个索引中显示actor的名字？

2）如何正确创建将获取以下索引并替换先前的actor.name的单击事件

用户流程：

• 罗素品牌是可见的
• 点击下next-actor – > Russell Brand的名字被Aaron Bielefeldt取代

Answer 1

由于您只想要当前用户，因此ng-repeat不是您想要使用的，因为那将是数据中的每个元素;

您可能希望跟踪范围内正在查看的索引，并增加该值。

 
 {{data[current].name}} 
 NEXT! 
  

在控制器中我们也有这些设置，其中数据是你的演员：

 $scope.current = 0; $scope.Next = function() { $scope.current = ($scope.current + 1) % $scope.data.length; }; 

这是一个小提琴 ，它完成了。

Answer 2

我会更改我的服务以返回单个actor并在控制器中维护索引。 这样的事情。 这是一个不完整的解决方案 – 您需要处理循环等…