2

I have a nested ng-repeat like this. I have a scope variable boards which is array and has further nesting with another array called tasks which is again an array. As you can see in the inner ng-repeat I am trying to bind to task.content.

<div class="col-md-3 boards topmargin leftmargin" ng-repeat="board in boards">
            <div class="row">
                <div class="col-md-12 centerText bordered"><b>{{board.title}}</b></div>
            </div>
            <div class="row topmargin tasksContainer">
                <div class="col-md-12">
                    <p ng-init="tasks = board.tasks" ng-repeat="task in tasks" ng-init="taskIndex=$index">
                        <div>
                            <span>{{taskIndex}}</span>
                            <span>{{task.content}}</span>
                        </div>
                    </p>
                </div>
                <hr>
            </div>
            <div class="row topmargin addTask">
                <div class="col-md-12"><textarea class="addTaskField" placeholder="enter task here....."
                 ng-model="newTask.content"></textarea></div>
                <button class="btn btn-primary btn-block" ng-click="addNewTask(board)">Add Task</button>
            </div>
        </div>

This is the structure of boards array

// vars
$scope.boards = [];
$scope.board={
    title: "",
    tasks: []
};
$scope.newTask = {
    content: "",
    tags: [],
    completed: null
};

I push the newTask object into board.tasks and board object in boards array which is working fine and on debugger boards array look like this

$scope.boards = [
    {
      title : "shopping",
      tasks : [
          {
              content: "pen",
              complete: false,
              tags: []
          },
          {
              content: "bread",
              complete: true,
              tags: ['groceries']
          }
      ]
    },
    {
      title : "tomorrow",
      tasks : [
          {
              content: "go swimming",
              complete: false,
              tags: []
          },
          {
              content: "complete to-do app",
              complete: false,
              tags: ['urgent']
          }
      ]
    }
];

The problem I am facing is that the binding {{task.content}} and {{taskIndex}} are not displaying. What am I doing wrong?

abhishek
  • 23
  • 7
  • This is a great first question. IMO keep posts succinct and free of chat/apologies though - they don't help how a question is received. – halfer Apr 30 '17 at 21:28
  • Possible duplicate of [ng-repeat inside UL (which is inside a P) is not working](http://stackoverflow.com/questions/19975557/ng-repeat-inside-ul-which-is-inside-a-p-is-not-working) – EProgrammerNotFound May 01 '17 at 01:32

1 Answers1

0

A few of things here:

The link that EProgrammerNotFound linked to in the comments (a <p> tag cannot contain a <div> tag)

Second, your ng-repeat is missing boards: ng-repeat="task in board.tasks". So, I think it's supposed to look like this:

<div class="col-md-3 boards topmargin leftmargin" ng-repeat="board in boards">
    <div class="row">
      <div class="col-md-12 centerText bordered"><b>{{board.title}}</b></div>
    </div>
    <div class="row topmargin tasksContainer">
      <div class="col-md-12">
        <div ng-repeat="task in board.tasks" ng-init="taskIndex=$index">
          <div>
            <span>{{taskIndex}}</span>
            <span>{{task.content}}</span>
          </div>
        </div>
      </div>
      <hr>
    </div>
    <div class="row topmargin addTask">
      <div class="col-md-12">
        <textarea class="addTaskField" placeholder="enter task here....." ng-model="newTask.content"></textarea>
      </div>
      <button class="btn btn-primary btn-block" ng-click="addNewTask(board)">Add Task</button>
    </div>
  </div>

Another thing is your <p> tag with the ng-repeat has two ng-inits. Not sure what that results in :) Example here https://plnkr.co/edit/yJ7u4YTu2TAfhFajAjUY

AHAY
  • 191
  • 1
  • 5