在点击我如何才能通过之一AngularJS通过JSON一个周期 [英] On click How can I cycle through JSON one by one in AngularJS

问题描述

创建我的第一个指令，因为在角-making练习或多或少自定义旋转木马，了解指令的工作原理。

Creating my first directive as an exercise in angular —making more or less a custom carousel to learn how directives work.

我已经建立了一个工厂的一些JSON数据：

I've set up a Factory with some JSON data:

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-重复显示模型数据：

And am using ng-repeat to display the model data:

<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）如何正确地创建一个click事件，将取以下指数和更换previous actor.name

2) How do I properly create a click event that will fetch the following index and replace the previous actor.name

用户流量：

• 拉塞尔·布兰德可见


• 下的演员点击 - >拉塞尔·布兰德的名字被替换为阿龙比勒费尔特

• Russell Brand is Visible
• click of next-actor ->Russell Brand's name is replaced with Aaron Bielefeldt

推荐答案

由于您只希望当前用户的NG重复是不是你想要干什么用的，因为这将是数据中的每个元素;

Since you only want the current user, the ng-repeat is not what you want to use, since that would be for each element in the data;

您想跟踪你在范围看指标，并增加了。

You would want to keep track of the index you are looking at in the scope, and increment that.

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

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

Where in the controller we also have these set up, where data is your actors:

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

下面是一个拨弄在那里完成了。

Here's a fiddle where it's done.

这篇关于在点击我如何才能通过之一AngularJS通过JSON一个周期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！