Angular: Push item to list doesn't update the view

Question

When I push an item to an array, the view won't refresh the list.

table:

<tbody id="productRows">
    <tr data-ng-repeat="product in products | filter: search">
        <td>{{ product.Code}}</td>
        <td colspan="8">{{ product.Name}}</td>
    </tr>
</tbody>

form:

<form data-ng-submit="submitProduct()">
    Code:
    <br />
    <input type="text" required data-ng-model="product.Code"/>
    <br />
    <br />
    Naam:
    <br />
    <input type="text" required data-ng-model="product.Name"/>
    <br />
    <input type="submit" value="Opslaan" />
</form>

submitProduct in controller:

$scope.submitProduct = function () {
    console.log('before: ' + $scope.products.length);

    $scope.products.push({Code: $scope.product.Code, Name: $scope.product.Name});
    console.log('after:' + $scope.products.length);
    console.log($scope.products);

    $scope.showOverlay = false;
};

As you can see, I log the total items in the array and it behaves like I would expect. The only thing that doesn't do what I expect is the content of my table, that doesn't show the new value.

What do I have to do, so the new row is displayed in the table?

This plnkr with your code works fine? Are you defining $scope.products correctly? — Brett Postin
– Brett Postin, Commented May 16, 2013 at 14:17
What code is calling submitProduct()? If this code is running "outside" Angular, you'll need to call $scope.$apply() at the end of your submitProduct() method to cause Angular to run a digest cycle, which will cause your view to update. — Mark Rajcok
– Mark Rajcok, Commented May 16, 2013 at 14:48

Brett Postin · Accepted Answer · 2013-05-16 14:27:03Z

5

I can't see the rest of your code, but make sure $scope.products is defined in your controller.

See this example.

The only addition I made to the code you provided was:

$scope.products = [];

If this doesn't help then please provide more information.

answered May 16, 2013 at 14:27

Brett Postin

11.4k10 gold badges62 silver badges99 bronze badges

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

1 Comment

Mekey Salaria Over a year ago

Your solution worked for me. I had the same issue, where items where not being pushed to my $scope.lists.push({});. I declared $scope.lists = []; on the top and it worked like a charm. Thanks.

Martijn · Accepted Answer · 2013-05-17 11:46:43Z

5

Thanks for the answer and the comments. The problem was at another place. In my routeProvider I had declared a controller. I also had a ng-controller directive in my div. So my controller gets executed twice. When I removed the ng-controller directive, everything was just working as it should be :)

answered May 17, 2013 at 11:46

Martijn

24.9k62 gold badges181 silver badges270 bronze badges

3 Comments

Daniel Flores Over a year ago

Thanks! , it also solved my problem, I declared a controller in the routeProvider while my body already had a ng-controller attribute. How did you know that was the problem ?

Martijn Over a year ago

@DanielFlores Well, I look at my code from the beginning till the end. So I started with ap..module, app.routes, all the way to my view. And when I look at my view I noticed that I had declared the same controller twice: in my route and in my view.

fuiiii Over a year ago

Thanks! This show my issue, too! :) I didn't user routeProvider, but I use the same controller in different div in the same page. And whenever i push something to the array, the controller reload, so I couldn't push anything. Thanks a lot!

Collectives™ on Stack Overflow

Angular: Push item to list doesn't update the view

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related