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

我有一个按年显示记录集的简单页面。只需注意，侧边栏不会正确突出显示选择内容。如何在json获取请求后更新模型？（Angular JS）

enter image description here

我能够加载数据，我第一次来到这个网页。但是，当我试图改变一年击去，主要内容区域变为空白和URL改变为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>

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

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

谢谢大家，他们贡献了他们的时间来帮助我！ :)

来源

2015-04-26 AS_

我们能不能看你怎么写了一首歌HTML你的“走出去”按钮？根据你的描述，我的想法是，按钮做得比我们想象的要多（以某种方式远离想要的视图） – Hypaethral

你能不能分享你的html代码tooo –

试试这个：** angular.copy（data，$ scope.annuals） ; ** –

这很难告诉你没有看到整个代码。不过我可以从这里看到的是你需要改变你的代码在适当的方式像下面，

让我们在你的.html页面说外层div是有其内所采取的其他HTML标签。所以先放NG-初始化指令外格，

的.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代码.... :)

来源

2015-04-26 06:27:56 micronyks

嗨micronyks，感谢您花时间回答我的问题。我发现你如何将initDashboard中的所有东西都包装起来，作为一种替代方法。 –

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

回答

相关问题

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