I'm using Angularjs and Spring .....
I had set the Session value for certain text fields using angularjs sessionstorage . When is reload the page or move backwards from other jsp page those values must retain in respective fields
$window.sessionStorage.setItem('namednewicno',$scope.user.namednewicno);
This is the session value for namednewicno
I need to display that value using data-ng-model
This is my controller
app.controller('FormSubmitController',[ '$scope', '$http','$window', function($scope, $http,$window) {
$scope.user = [];
$scope.headerText = 'AngularJS Post Form Spring MVC example: Submit below form';
$scope.submit = function() {
$window.localStorage.setItem('namednewicno',$scope.user.namednewicno);
$window.sessionStorage.setItem('namednewicno',$scope.user.namednewicno);
var formData = {
"namednewicno" : $scope.user.namednewicno,
"namedoldicno" : $scope.user.namedoldicno,
"namedage" : $scope.user.namedage,
"nameddriverexperience" : $scope.user.nameddriverexperience,
"namedgender" : $scope.user.namedgender,
"nameddrivername" : $scope.user.nameddrivername,
"nameddriverrelationship" : $scope.user.nameddriverrelationship
};
alert("controller");
var response = $http.post('PostFormData', formData);
response.success(function(data, status, headers, config) {
$scope.user.push(data);
alert("success");
});
response.error(function(data, status, headers, config) {
alert( "Exception details: " + JSON.stringify({data: data}));
});
$scope.user.namednewicno=$window.sessionStorage.getItem( 'namednewicno' );
console.log($window.sessionStorage.getItem( 'namednewicno' ));
//Empty list data after process
// $scope.user = [];
};
}]);
app.controller('NamedPopup',[ '$scope', '$http','$window', function($scope, $http,$window) {
$scope.user = [];
$scope.user.namednewicno=$window.sessionStorage.getItem( 'namednewicno' );
$scope.submit = function() {
$window.sessionStorage.setItem('namednewicno',$scope.user.namednewicno);
var formData = {
"namednewicno" : $scope.user.namednewicno
};
var response = $http.post('saveNamedDrivers', formData);
response.success(function(data, status, headers, config) {
$scope.user.push(data);
//alert("success");
});
response.error(function(data, status, headers, config) {
alert( "Exception details: " + JSON.stringify({data: data}));
});
//Empty list data after process
$scope.user = [];
};
}]);
The Html code must be like this to retain the session on html
<input ng-value="{{user.namednewicno}}"
ng-model="user.namednewicno"
required
class="form-control" type="number" />
Related
I am trying to combine response of one POST data with another input JSON so that it can do another POST function.
Controller 1:-
$scope.master = {};
$scope.addChild = function(net) {
$scope.master = angular.copy(net);
$http.post("url",$scope.master).then( function(data) {
$scope.childData = data;
$scope.dataName = $scope.master.Name;
growl.success("Created a new Child");
console.log(data);
},function (data, status, headers, config) {
growl.error("Something went wrong");
});
console.log($scope.master);
};
Now I want to add the response of this controller ie; $scope.segments = data; to 2nd controller:-
Controller 2:-
$scope.addOverall = {Child: []};
$scope.Create = function() {
$http({
method : 'POST',
url : 'api',
data : $scope.addOverall
}).success(function(data, status, headers, config) {
growl.success("Created a Table");
console.log(data);
},function (data, status, headers, config) {
growl.error("Something is wrong");
});
};
So now , my response data from controller 1 must combine with 2nd controller input over here {Child: []}; inside the [ ] How can I achieve that?
Controller 1:
If you get result in data then use $rootscope for other variable
$rootScope.myGlobalVariable = [] //if response is array or object
$http.post("url",$scope.master).then( function(data) {
$rootScope.myGlobalVariable = data;
Controller 2:
success(function(data, status, headers, config) {
$scope.mylocalVariable = data;
final values in controller 2
for(var i=0; i<$scope.localVariable.length; i++)
{
$rootScope.myGlobalVariable.push($scope.localVariable[i]);
}
console.log('combine json values', $rootScope.myGlobalVariable);
I hope this answer is work for You.
Thanks
I am trying to get the model data in angular js ,but not able to get it . I printed the value on spring mvc side .The data is getting stored and is retrieved successfully with the given key.Can anyone tell me how can I achieve this .
My controller-
#RequestMapping(value = "/home.web", method = RequestMethod.GET, produces = {
"application/json" })
public ModelAndView getUSCity(#RequestParam ("statechoice") String statechoice) {
List<String> msa = new ArrayList<String>();
msa = msaService.getMsaCodes(statechoice);
/*ModelAndView model = new ModelAndView("Home");
model.addObject("cities",msa);
System.out.println(model.getModel().get("cities"));*/
//return msa;
return new ModelAndView("Home", "cities",msa);
}
My angular js -
function MyController($scope, $http) {
$scope.getPersonData = function() {
$http({
method : 'GET',
url : 'home.web'
}).success(function(data, status, headers, config) {
alert(data);
$scope.cities = data;
}).error(function(data, status, headers, config) {
console.log("error");
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
};
Split your code into controller and service because you should not do api calls from cotroller directly(best case). Services should be used. Controllers are only be used to controlling model to show it in the view.
myService.js
app.service('myService', ['$http', '$q', function($http, $q){
return {
getPersons: function(obj) {
var deferred = $q.defer();
$http({
method : obj.method,
url : obj.url
}).then(function(response) {
deferred.resolve(response);
}, function(error) {
alert(error);
deferred.reject(error);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
return deferred.promise();
};
}
});
myController.js
function MyController('MyController', ['$scope', 'myService', function($scope, myService){
$scope.persons = [];
var obj = {method: 'GET', url: 'home.web'};
myService.getPersons(obj).then(function(response){
$scope.persons = response.data // or $scope.persons = response check yourself
}, function(error){
alert(error);
})
}]);
Hi friends, I want to read parameter from current URL of the page in
angularJS. My page URL is
'http://localhost:9999/ADMIN_APP_0.1/Security_Question.jsp?user_id=1'.I
want to read this user_id in Security_Question.jsp
I googled and I got something Route in angular but my code style and its style is quite different.And I don't know about route.
Forgot password is jsp page which is calling security question page
Forgot_Password.jsp
var app = angular.module('formSubmit', []);
app.controller('forgotController',[ '$scope', '$http', function($scope, $http) {
$scope.listOfSecurityQues=[];
$scope.getAvailableUser = function() {
var loginId= {
"user_login" :$scope.loginid
};
window.alert(" login ::::"+loginId);
var response = $http.post('loginController/loginidAvailable', loginId);
response.success(function(data, status, headers, config) {
window.location="./SecurityQuestion.jsp?user_id="+data;
});
response.error(function(data, status, headers, config) {
alert( "Exception details: " +data+" "+status);
});
//Empty list data after process
$scope.list = [];
}; // end of getAvailableUser
Security_Question .jsp
var app = angular.module('formSubmit', []);
app.controller('forgotController', ['$scope','$http',function($scope,
$http) {
$scope.listOfUserSecurityQues = [];
$scope.getUserQuestions = function()
{
//here i want that URL user_id
var response = $http({method : 'GET',
url : "loginController/getUserQuestions"+user_id
});
response.success(function(data, status, headers, config) {
angular.forEach(data, function(value, key) {
$scope.listOfUserSecurityQues.push(value);
})
})
response.error(function(data, status, headers, config) {
})
};//end of getQuestions()
} ]);
by using $location we can read parameter of url.
app.controller('Controller', ['$scope','$http','$location',
function($scope, $http,$location)
{
$scope.Id=0;
$scope.getUserQuestions=function(){
var url = $location.search();
angular.forEach(url,function(value,key){
$scope.Id=parseInt(value);
window.alert($scope.Id);
}) }
I am new to angularjs.
I have following UI template DashBoard.html
on click of CREATE NEW EVENTS i am posting data to server.
In the screen shot above => is EDIT functionality.
On click of that pencil symbol I am displaying below UI template.
Manage-CMS.html
Now I want to fill those empty text boxes with the pre-filled value.
and also onclick of SAVE button I want to update that data to server.
How could I achieve that ?
Please help.
CODE I am trying:
codeApp.controller('DashboardController', function($scope, $rootScope, $location, $http) {
$scope.username = "Admin";
$scope.apps = [];
$scope.initController = function(){
var appDetails = new Array();
var appObject = new Object();
$scope.id = sessionStorage.id;
$http.get('http://192.168.1.30:8090/apps/').
success(function(data, status, headers, config) {
console.log(data);
for(var key in data._embedded.apps){
appObject = data._embedded.apps[key];
appDetails.push(appObject);
$rootScope.appId = data._embedded.apps[key].appId;
}
$scope.appDetails = appDetails;
}).
error(function(data, status, headers, config) {
alert("Failed to load app details");
});
};
$scope.go = function (path) {
$location.path(path);
var display = false;
if(!display){
}
};
$scope.addApp = function(){
$scope.apps.push({'name':$scope.name, 'domain': $scope.domain, 'appId' : $scope.appId, 'secret' : $scope.secret});
// Writing it to the server
//
var dataObj = {
name : $scope.name,
domain : $scope.domain,
appId : $scope.appId,
secret : $scope.secret
};
var res = $http.post('http://192.168.1.30:8090/apps/', dataObj);
res.success(function(data, status, headers, config) {
$scope.message = data;
});
res.error(function(data, status, headers, config) {
alert( "failure message: " + JSON.stringify({data: data}));
});
// Making the fields empty
//
$scope.name='';
$scope.domain='';
$scope.appId = '';
$scope.secret = '';
};
});
NOTE: same SAVE button is used for both server side functionality i.e. POST and PUT
You can pass the data of that row on click of the edit button, the easiest way to do this is to use a modal ( I prefer using bootstrap based angular-bootstrap by angular-ui https://github.com/angular-ui/bootstrap ).
Pass the data of your ng-repeat row to the modal and then update the data in the form. On save you can call $http.put/post to update the data to the server.
the problem is when I use $http or $resource to retrieve data, it is successfully retrieve and bind to view, but when I use promise the data come to client but it does not bind to the view.
here is my code:
//view
<div class="pull-left span6" >
<h3>{{Name}}</h3>
<ul>
<li ng-repeat="type in typeList">
<span>{{type.Title}}</span>
</li>
</ul>
//controller
var proxyControllers = angular.module('httpProxyControllers', []);
proxyControllers.controller('TypeListController',
function TypeListController($scope, typeListData) {
$scope.Name = 'Type List Addresses';
$scope.typeList = typeListData.getTypeList();
$scope.typeList.then(function(data){
console.log('data received');
console.log(data);
},function(status){
console.log(status);
});
});
//service
var proxyServices = angular.module('httpProxyServices', ['ngResource']);
proxyServices.factory('typeListData' , function($http, $q){
return{
getTypeList : function(){
var deferred = $q.defer();
$http({method : 'GET' , url: '/data/getTypeList'})
.success(function(data, status, headers, config){
deferred.resolve(data);
})
.error(function(data, status, headers, config){
deferred.reject(status);
});
return deferred.promise;
}
}
});
in then block of controller when i log data to console, it shows that data comes back successfully but nothing happen to my view and my view shows nothing actually.
thanks in advance,
You need to assign data to $scope.typeList
//initialize with empty array
$scope.typeList = [];
typeListData.getTypeList().then(function(data){
//initialize with received data
$scope.typeList = data;
console.log('data received');
console.log(data);
},function(status){
console.log(status);
});