Question

我正在尝试更新$ scope变量onClick，该变量会从本地JSON文件填充表格。到目前为止，我的代码是

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>

当我单击下拉菜单中的“更新”按钮时，我看到响应记录在控制台中，但是表无法更新onClick。单击按钮时，是否需要调用一个函数以异步方式更新页面？当我在scope.update函数之外使用http get函数时，在页面加载时效果很好。

Answer 1

您要创建两个单独的控制器实例，因为模板中有两次ng-controller="myCtrl"。

因此处理点击的控制器与保存表显示的数据的控制器不同。而且它们的范围也不相同：每个控制器实例都有自己的范围。

Angular JavaScript Update $ scope变量onClick

1 个答案: