ajax - How to update model after making json get request? (Angular JS) -
i have simple page shows set of records according year. note, sidebar not highlighting selection properly.
i able load data first time come page. when try change year , hit go, main content area goes blank , url changes localhost:8080/cg/
here controller code.
app.controller('annualreportcontroller', ['$scope', '$http', function ($scope, $http) { $scope.annuals = []; $scope.selection = 0; // gives me year value drop down. // initial load works $http.get('annualreport/list').success(function (data) { $scope.annuals = data; $scope.selection = data.year; }); // on-click event 'go' $scope.searchgo = function () { $http.get('annualreport/list', {params: {year:$scope.selection} }).success(function (data) { $scope.annuals = data; $scope.selection = data.year; }); } }]); can please tell mew how can update model , view data?
here partial controller..
<h1 class="page-header">annual report - {{annuals.year}}</h1> <div> <select ng-model="selection" ng-options="o 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> i think found culprit. href="#" in 'go' button, grumble snatch's comment!
if change href="" seems work. brings question, whether okay have blank href in html?
thanks contributed time me out! :)
this hard tell without seeing whole code. still can see here need change code in proper way below,
let's in .html page outer div there within other html tags taken. first put ng-init directive outer div,
.html(let's call dashboard.html)
<html> .... <body> <div ng-app="myapp" // angular module name ng-controller="annualreportcontroller" // angular controller ng-init="initdashboard()"> ..................// other html controls.............. </div> </body> </html> annualreportcontroller.js
app.controller('annualreportcontroller', ['$scope', '$http', function ($scope, $http) { // have removed first 2 declaration..... $scope.initdashboard=function() { // put code in initdashoard function :) // initial load works $http.get('annualreport/list').success(function (data) { $scope.annuals = data; $scope.selection = data.year; // here don't think need define $scope.selection=0 because above line data.year must assigning value $scope.selection. }); } // on-click event 'go' $scope.searchgo = function () { $http.get('annualreport/list', {params: {year:$scope.selection} }).success(function (data) { $scope.annuals = data; $scope.selection = data.year; }); } }]); this surely work. if doesn't let me know , come html code.... :)
Comments
Post a Comment