单击如何在 AngularJS 中一一循环遍历 JSON [英] On click How can I cycle through JSON one by one in AngularJS

问题描述

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

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

directiveApp.factory("Actors", function(){var 演员 = {};Actors.detail = {1":{"name": "罗素牌","职业": "演员",瑜伽": ["比克拉姆","哈达",流瑜伽"]},2":{"name": "Aaron Bielefeldt","职业": "大使",瑜伽": ["比克拉姆","哈达",流瑜伽"]},3":{"name": "Adrienne Hengels","职业": "大使",瑜伽": ["比克拉姆","哈达",流瑜伽"]}};返回演员；});

还有一个 actor 控制器:

function actorCtrl($scope, Actors) {$scope.actors = 演员；}

并且正在使用 ng-repeat 来显示模型数据:

<div ng-repeat="actor in actor.detail"><p>{{actor.name}} </p>
<div ng-click="next-actor">下一个演员</div>

1) 如何在我的 Angular 模型 actors.detail 的第一个索引中只显示演员的名字?

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

用户流程:

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

解决方案

因为你只想要当前用户，所以 ng-repeat 不是你想要使用的，因为那将是针对数据中的每个元素；

您可能希望跟踪您在范围内查看的索引，并将其递增.

{{数据[当前].名称}}<div ng-click="Next();">下一个！

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

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

这是一个fiddle完成的地方.

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

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;
});

And an actors controller:

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

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) How do I only display the actor's name in the first index of my angular model actors.detail?

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

User flow:

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

解决方案

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屋！