单击时，如何在AngularJS中逐个循环JSON

Question

创建我的第一个指令作为角度练习—或多或少地制作一个自定义轮播，以学习指令的工作方式。

我已经用一些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显示模型数据：

<div ng-controller="actorsCtrl">
  <div ng-repeat="actor in actors.detail">
    <p>{{actor.name}} </p>
  </div>
      <div ng-click="next-actor">Next Actor</div>
</div>

1）如何仅在我的角度模型actors.detail的第一个索引中显示演员名称？

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

用户流：

• 罗素品牌可见
• 单击下next-actor ->拉塞尔·布兰德（Russell Brand）的名字被替换为亚伦·比勒费尔特（Aaron Bielefeldt）

Answer 1

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

您可能希望在范围内跟踪正在查看的索引，并对其进行递增。

<div ng-controller="TestController">
    {{data[current].name}}
    <div ng-click="Next();"> NEXT! </div>
</div>

我们还在控制器中的哪个位置进行了设置，其中数据是您的参与者：

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

这是完成的小提琴 。

Answer 2

我将更改服务以返回单个actor并在控制器中维护索引。 像这样 。 这是一个不完整的解决方案-您需要注意循环等...