单击如何在 AngularJS 中一一循环浏览 JSON答案

【问题标题】：On click How can I cycle through JSON one by one in AngularJS单击如何在 AngularJS 中一一循环浏览 JSON
【发布时间】：2013-12-07 08:41:59
【问题描述】：

创建我的第一个指令作为 Angular 的练习——制作或多或少的自定义轮播以了解指令的工作原理。

我用一些 JSON 数据建立了一个工厂：

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) 如何只在我的 Angular 模型actors.detail 的第一个索引中显示演员的姓名？

2) 如何正确创建一个点击事件，该事件将获取以下索引并替换之前的actor.name

用户流量：

罗素品牌可见
点击next-actor ->Russell Brand 的名字被替换为 Aaron Bielefeldt

【问题讨论】：

为什么不制作一组演员？

标签： javascript jquery json angularjs angularjs-directive

【解决方案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;
};

这是完成的fiddle。

【讨论】：

【解决方案2】：

我会更改我的服务以返回单个参与者并在控制器中维护索引。类似this。这是一个不完整的解决方案-您需要注意循环等...

【讨论】：