Question

我有一个简单的页面，根据年份显示记录集。只是注意，侧边栏没有正确突出选择。

enter image description here

我第一次来到这个页面时能够加载数据。但是，当我尝试更改年份并点击时，主要内容区域变为空白，并且网址更改为localhost：8080 / cg /

这是我的控制器代码。

        app.controller('AnnualReportController', ['$scope', '$http', function ($scope, $http) {

            $scope.annuals = [];
            $scope.selection = 0; // gives me the year value from the drop down.

            // initial load that works
            $http.get('annualReport/list').success(function (data) {
                $scope.annuals = data;
                $scope.selection = data.year;
            });


            // on-click event for 'Go'  
            $scope.searchGo = function () {
                $http.get('annualReport/list', {params: {year:$scope.selection}
                }).success(function (data) {
                    $scope.annuals = data;
                    $scope.selection = data.year;
                });
            }
        }]);

有人可以告诉我如何更新模型并查看我的数据？

这是我对这个控制器的偏爱..

        <h1 class="page-header">Annual Report - {{annuals.year}}</h1>

        <div>
            <select ng-model="selection" ng-options="o for o in annuals.yearList"></select>
            <a href="#" class="btn btn-primary" ng-click="searchGo()">Go</a>
        </div>

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Property Name</th>
                    <th>Submitted</th>
                    <th>Year</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="annual in annuals.properties | orderBy : 'name'">
                    <td>{{annual.propCgName}}</td>
                    <td>
                        <input type="checkbox" ng-change="checkUpdate(annual)" ng-model="annual.submitted">
                    </td>
                    <td>{{ annual.year }}</td>
                </tr>
                </tbody>
            </table>
        </div>

我想我找到了罪魁祸首。感谢Grumble Snatch的评论，我的'Go'按钮中的href =“＃”！

如果我改为href =“”它似乎有效。这带来了另一个问题，那就是在html中是否可以使用空白href？

感谢所有贡献时间帮助我的人！：）

Answer 1

如果没有看到整个代码，很难告诉你。我从这里可以看到的仍然是你需要以适当的方式更改你的代码，如下所示，

让我们在您的.html页面中说外部div是在其中的其他html标签。所以首先将ng-init指令放到外部div，

.html（让我们称之为dashboard.html）

<html>
....
<body>
    <div ng-app="myApp" // your angular module name
         ng-controller="AnnualReportController" // your angular controller 
         ng-init="initDashboard()">

      ..................// other html controls..............
     </div> 

</body>
</html>

AnnualReportController.js

app.controller('AnnualReportController', ['$scope', '$http', function ($scope, $http) {
               // I have removed first two declaration.....

             $scope.initDashboard=function()
             {
                  // put this code with in this initDashoard function :)

                 // initial load that works
                $http.get('annualReport/list').success(function (data) {
                $scope.annuals = data;
                $scope.selection = data.year; // here I don't think you need to define $scope.selection=0 because above line data.year must be assigning some value to $scope.selection.

                 });
             }

            // on-click event for 'Go'  
            $scope.searchGo = function () {
                $http.get('annualReport/list', {params: {year:$scope.selection}
                }).success(function (data) {
                    $scope.annuals = data;
                    $scope.selection = data.year;
                });
            }
        }]);

这肯定有用。如果没有让我知道并提出你的HTML代码......：）

如何在json获取请求后更新模型？（Angular JS）

1 个答案:

如何在json获取请求后更新模型？ （Angular JS）

1 个答案:

如何在json获取请求后更新模型？（Angular JS）