На клик Как я могу циклически перемещаться по JSON по одному в AngularJS

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

И я использую нг-повтора для отображения данных модели:

<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 -> Имя Рассела Брэда заменено на Аарона Билефельда

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

Я бы сменил свой serivce, чтобы вернуть петь le actor и поддерживать индекс в контроллере. что-то вроде this. Это неполное решение - вам нужно позаботиться о цикле и т. Д.