View not updating after change to array in AngularJS

Question

In AngularJS, I am trying to add a new item to an array. The item gets added correctly, but the display does not reflect the change.

Add new task:

 $scope.addNewTask = function() 
 {  
    console.log( "Before: " + $scope.tasks.length );

    $scope.newTask = [
        {
            id:     '3',
            title:  'Get answer'
        }
    ];

    $scope.tasks.push( $scope.newTask[0] );

    console.log( "After: " + $scope.tasks.length ); // one more than before
};

Task array:

$scope.tasks = [
    {
        id:     '1',
        title:  'Run into problem'
    },
    {
        id:     '2',
        title:  'Ask question'
    }
];

View:

<ul>
    <li ng-repeat="task in tasks>
        {{ task.id }} {{ task.title }}
    </li>
</ul>

While I can see on the console that the new item was added, the list is not updating to reflect the change.

Edit: Don't know if it makes any difference, but the function is called upon clicking the submit button of a form as follows:

<form class="newtask-form" ng-submit="addNewTask()">
    <input type="submit" name="submit" value="Add new task" />
</form>

Maybe it too hard to do, but next time try to show how it works in Fiddle or Plunker, to detect the issue and fix quickly. — Maxim Shoustin
– Maxim Shoustin, Commented Jun 1, 2013 at 13:30
I can't reproduce your problem. Take a look at this fiddle: jsfiddle.net/ecJUJ. I just copy and pasted your code and it works. Except by the missing " to close the ng-repeat. — Jonas
– Jonas, Commented Jun 1, 2013 at 15:02
Thanks for trying. Unfortunately it turned out to be something else (see my own answer). — Ben
– Ben, Commented Jun 1, 2013 at 21:57

Ben · Accepted Answer · 2013-06-01 21:23:11Z

3

So, I solved it. The problem was this: In my code, I set ng-controller manually outside of ng-view. However, through the router, the controller for the view was set to the same controller.

So I believe what happened is that I had two nested controller objects, one with the tasks that got changed through the form submit, and another one with the tasks that got displayed through the li.

Ultimately, it looks like I will need to restructure my application and start using services for my data rather than stuffing it all into my controller (any good introductions about services are appreciated). But at least now I have an idea what the problem was.

answered Jun 1, 2013 at 21:23

Ben

16.8k19 gold badges101 silver badges159 bronze badges

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

Comments

Kassem · Accepted Answer · 2013-06-01 14:39:52Z

1

Try to use an ng-click on the input itself rather than ng-submit on the form.

    <form class="newtask-form">
        <input type="submit" name="submit" 
               ng-click="addNewTask()" value="Add new task" />
    </form>

Not sure if that should make a difference but it's the only thing I could think of (other than calling scope.$apply() which you've already did.

answered Jun 1, 2013 at 14:39

Kassem

8,28618 gold badges77 silver badges119 bronze badges

1 Comment

Ben Over a year ago

Thanks for trying to help. Unfortunately it turned out to be something else (see my own answer).

Collectives™ on Stack Overflow

View not updating after change to array in AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related