Ajax 发出json get请求后如何更新模型？（角形JS）
我有一个简单的页面，根据年份显示一组记录。 请注意，侧边栏没有正确突出显示所选内容 我能够在第一次访问此页面时加载数据。但是，当我尝试更改年份并点击go时，主内容区域变为空白，url变为localhost:8080/cg/ 这是我的控制器代码Ajax 发出json get请求后如何更新模型？（角形JS）,ajax,json,angularjs,angularjs-scope,Ajax,Json,Angularjs,Angularjs Scope,我有一个简单的页面，根据年份显示一组记录。 请注意，侧边栏没有正确突出显示所选内容 我能够在第一次访问此页面时加载数据。但是，当我尝试更改年份并点击go时，主内容区域变为空白，url变为localhost:8080/cg/ 这是我的控制器代码 app.controller('AnnualReportController', ['$scope', '$http', function ($scope, $http) { $scope.annuals = []
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>
感谢所有贡献时间帮助我的人！： 如果不看完整的代码，很难告诉您这一点。从这里我仍然可以看到，您需要以如下所示的正确方式更改代码 假设在您的.html页面中，有一个外部div，其他html标记都在其中。所以首先把ng init指令放到外部div .htmlet称之为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>
这肯定会奏效。如果不让我知道并提供您的html代码….： 我们可以看看你是如何用html编写go按钮的吗？根据您的描述，我的想法是，该按钮所做的事情比我们想象的要多，它远离了所需的视图。您如何共享html代码来改变这一点：angular.copydata，$scope.annuals；您的go按钮是表单的一部分还是具有submit类型？你要确保事实并非如此。我怀疑牢骚斯奎奇的想法是正确的。嗨，麦科尼克斯，谢谢你花时间回答我的问题。我发现你是如何将所有东西包装在initDashboard中的，这是一种有趣的替代方法。
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;
});
}
}]);