Nested ng repeat not working

Question

Ok, i've two ng-repeat working here, the first(board in boards) is working good, no problem, but the second(task in tasks), when i try to get "{{task.title}}" i don't get anything but i can display all the style from it...

Edit - It's strange because "data-ng-if="task.boardIndex === board.id"" work ok!, but inside of it, when i try "{{task.title}}" it don't get anything...

here is my model:

 $scope.tasks = [{boardIndex: 0, title: "test"}, {boardIndex: 1, title: "test2"}];

Here is my code(it's in jade, ok?)

section(data-ng-repeat="board in boards", ng-cloak)
        .board_header
            div(data-ng-controller="AddTaskBtnController")
                i.add_task_btn.fa.fa-plus-square-o.fa-2x(ng-click='setSelected(board.id)', ng-class="{icon_add_hover: isSelected(board.id)}")
            h2(data-ng-bind="board.title")
        .content_board
            .task(data-ng-repeat="task in tasks", data-ng-if="task.boardIndex === board.id", data-ng-controller='TaskController', data-ng-hide='modeTask', data-ng-init='setTaskId()')
                .user_icon_task
                    i.fa.fa-user.fa-3x.icon-user-not-selected
                .quest_task
                    .puzzle_task(data-ng-hide='modeTask')
                        i.fa.fa-check-circle-o.fa-lg
                    h2 {{task.title}}
                ul.icons_details_task_wrapper
                    li
                        i.fa.fa-check-circle-o
                        span.icon_counter
                    li.pull_left
                        i.fa.fa-puzzle-piece
                        span.icon_counter
                ul.task_details_wrapper
                    li.task_priority(data-ng-show='goal.selectedDrawAttention', data-ng-click='toggleSelected()', data-ng-class='{draw_attention_selected: goal.selectedDrawAttention }', style='cursor: inherit;')
                        i.fa.fa-eye
                    li.task_priority
                        i.fa
                .task_time_ago
                    span(am-time-ago='message.time')

This *might* help: http://stackoverflow.com/questions/21351988/angular-js-ng-repeat-and-loop-conditions — Bugs, Jun 03 '14 at 15:27
This is likely the same thing: http://stackoverflow.com/questions/18056241/angular-ng-repeat-with-condition — Bugs, Jun 03 '14 at 15:28
Bugs, it's not a same thing, the problem here is with nested ng-repeat... — Rodrigo Fonseca, Jun 03 '14 at 15:34

score 0 · Answer 1 · answered Jun 03 '14 at 15:30

0

the first ng-repeat creates an isolated scope so if your tasks is part of the parent controller scope you need to append $parent in front of tasks like

 ng-repeat="task in $parent.tasks"

your nesting assumes a model like

$scope.boards=[{name:"board1",tasks:[/*array of tasks*/]}]

if you have

$scope.boards=[{name:"board1",/etc/] $scope.tasks = [{boardIndex: 0, title: "test"}, {boardIndex: 1, title: "test2"}];

you need the parent to access the parent scope

answered Jun 03 '14 at 15:30

Dayan Moreno Leon

5,357
2
22
24

i understood what you said, but it didn't worked... :( – Rodrigo Fonseca Jun 03 '14 at 15:35
can you paste the resulting html am not very familiar with that template language – Dayan Moreno Leon Jun 03 '14 at 15:49
1

"the first ng-repeat creates an isolated scope", this is incorrect. Repeat creates child scopes and you can access parent scope without using $parent. You only require $parent if the same property is declared on both scopes. – Chandermani Jun 03 '14 at 15:55
do you know why i don't get anything when i try to get {{task.title}}, but i get my task.boardIndex here: "data-ng-if='task.boardIndex == board.id'"? – Rodrigo Fonseca Jun 03 '14 at 15:59
each repeat option creates a new scope by definition is isolated hence you need to use parent to acces the parent scope elements, i invite you to create a fidle to prove me wrong please, so i can learn – Dayan Moreno Leon Jun 03 '14 at 16:12
Rodrigo the problem is that you are trying to access a property of in a scope that has not yet being created if you move your ng-if a inside your ng-repeat youll be able to access it. if you need to acces that before creating the scope then you need to use $parent.tasks[$index] where $index should be refering to the $index variable in the first ng-repeat – Dayan Moreno Leon Jun 03 '14 at 16:15
Sorry Dayan, but i think that Chandermani was right, because the scope in Angular(in most cases) is prototypically inherit from another, so, you will only use $parent, when you don't want to use your actual scope, but only the parent scope... But Thanks anyway! – Rodrigo Fonseca Jun 03 '14 at 16:21
You guys are right, but my last comment on what you are trying to accomplish is correct. Don't be sorry for correcting me, We are all here to learn, so Thank you – Dayan Moreno Leon Jun 03 '14 at 16:26

Rodrigo Fonseca · Answer 2 · 2014-06-03T18:28:44.157

0

the problem here was because in my TaskController(that is inside of my BoardsController) i was setting this:

$scope.task                         = {};

So, every time i called .task(controller=TaskController) in my ng-repeat, it erased everything in task...

Sorry for this, and thanks to everyone!

edited Jun 03 '14 at 18:28

answered Jun 03 '14 at 16:17

Rodrigo Fonseca

944
7
21

Nested ng repeat not working

2 Answers2