find out index of several using directive / angular

Question

i wrote a directive that give out some clickable divs for a kicker game, it look like that:

<span>Team 1</span>
<scoreDisplay>
    <div ng-click="setScore(0)" class="score-item">1</div>
    <div ng-click="setScore(1)" class="score-item">2</div>
    <div ng-click="setScore(2)" class="score-item">3</div>
    <div ng-click="setScore(3)" class="score-item">4</div>
    <div ng-click="setScore(4)" class="score-item">5</div>
    <div ng-click="setScore(5)" class="score-item">6</div>
</scoreDisplay>

<span>Team 2</span>
<scoreDisplay>
    <div ng-click="setScore(0)" class="score-item">1</div>
    <div ng-click="setScore(1)" class="score-item">2</div>
    <div ng-click="setScore(2)" class="score-item">3</div>
    <div ng-click="setScore(3)" class="score-item">4</div>
    <div ng-click="setScore(4)" class="score-item">5</div>
    <div ng-click="setScore(5)" class="score-item">6</div>
</scoreDisplay>

after a click on a score-item, i want to get the index of the directive, where the items inside, here the scopefunction inside the controller:

$scope.game = {
    team_1:{name:'Ateam',score:0}
    team_2:{name:'Bteam',score:0}
};
$scope.setScore = function(itemindex, directiveindex){
    $scope.game["team_"+(directiveindex+1)].score = (itemindex+1)

}

any idea, how i can get the directive-index (the parent elemment dom index) with angular? thanks for helping.

Use '$index' for this purpose and 'ng-repeat' directive.

Kailash
– Kailash

2014-09-27 17:26:10 +00:00
Commented Sep 27, 2014 at 17:26 — Kailash
– Kailash, Commented Sep 27, 2014 at 17:26

Taras Kostiuk · Accepted Answer · 2014-09-27 17:02:25Z

0

Use ng-repeat directive for code parts like:

    <div ng-click="setScore(0)" class="score-item">1</div>
    <div ng-click="setScore(1)" class="score-item">2</div>
    <div ng-click="setScore(2)" class="score-item">3</div>
    <div ng-click="setScore(3)" class="score-item">4</div>
    <div ng-click="setScore(4)" class="score-item">5</div>
    <div ng-click="setScore(5)" class="score-item">6</div>

You can replace in controller:

$scpe.teams = [...]

In template:

<div ng-repeat="team in teams" ng-click="setScore(team.score,$index)" class="score-item">{{team.name}}</div>

You can make similar change for scoreDisplay

answered Sep 27, 2014 at 17:02

Taras Kostiuk

2111 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chrobak Stefan Over a year ago

I m using ng-repeat in the directive and i don't want the index of the directive items, i want to found out the directive - index like this: <mydirective index="1"></mydirective> <mydirective index="2"></mydirective>

Taras Kostiuk Over a year ago

Not sure I understood your comment... If you want to get directive scope, then angular.element('...').scope() if you want parent index then you need use jquery

Chrobak Stefan · Accepted Answer · 2014-10-08 20:59:56Z

0

Found a solution with a attribute "index":

<scoreDisplay index="1"></scoreDisplay>
<scoreDisplay index="2"></scoreDisplay>

This works fine, but i will search for a better solution like this or with something like:

angular.element("body scoreDisplay").index($event.target);

answered Oct 8, 2014 at 20:59

Chrobak Stefan

235 bronze badges

Collectives™ on Stack Overflow

find out index of several using directive / angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related