Question

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

我已经设置了一个带有一些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）我如何只在角度模型actors.detail的第一个索引中显示演员姓名？

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

用户流程：

Russell Brand可见
点击next-actor - ＆gt; 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;
};

这里有一个fiddle已经完成了。

Answer 2

我会更改我的服务以返回单个actor并在控制器中维护索引。像this这样的东西。这是一个不完整的解决方案 - 你需要处理循环等...

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

2 个答案: