Angular JavaScript Update $scope variable onClick

Question

I'm trying to update a $scope variable onClick that populates a table from a local JSON file. So far my code is

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
      $scope.update = function () {
                 // Load JSON data to $scope
                $http({
                    method: 'get', 
                    url: '/JSON/Info.json'
                }).then(function (response) {
                    console.log(response, 'res');
                    $scope.friendz = response.data[1];
                },function (error){
                    console.log(error, 'can not get data.');
                });
            }
});

            <div ng-controller="myCtrl" class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <button class="dropdown-item" ng-click="update()">Action</button>
            </div>

     <div ng-controller="myCtrl">
            <table border="1">
                <tr>
                    <th>Name</th>
                    <th>Fax</th>
                    <th>Phone</th>
                    <th>Address</th>
                    <th>Attention</th>
                    <th>Submission</th>
                </tr>
                <tr>
                    <td ng-bind="friendz.Payee.Name"></td>
                    <td ng-bind="friendz.Payee.Fax"></td>
                    <td ng-bind="friendz.Payee.Phone"></td>
                    <td ng-bind="friendz.Payee.Address"></td>
                    <td ng-bind="friendz.Payee.Attention"></td>
                    <td ng-bind="friendz.Payee.SubmissionDate"></td>
                </tr>
            </table>
        </div>

When I click my update button in the dropdown menu, I see the response is logged in the console, but the table fails to update onClick. Is there a function that I need to call to update the page in an asynchronous fashion when I click my button? When I use the http get function outside of my scope.update function, it works fine on page load.

JB Nizet · Accepted Answer · 2018-11-04 20:59:39Z

2

You're creating two separate instances of your controller, since you have ng-controller="myCtrl" twice in the template.

So he controller handling the click is not the same one that holds the data displayed by the table. And their scope are not the same either: each controller instance has its own scope.

answered Nov 4, 2018 at 20:59

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

1 Comment

John Doe Over a year ago

Thanks so much! Angular noob here, now that I look it over it seems obvious to me now -.-. Works perfect now

Collectives™ on Stack Overflow

Angular JavaScript Update $scope variable onClick

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related