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.
Related
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" />
I am using a service with an async call.
The service looks like that;
var routesApp = angular.module('routesApp', []);
routesApp.factory('angRoutes', function($http) {
var angRoutes = {
async: function(id) {
var data = $.param({
query: id
});
var config = {
headers : {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
}
var promise = $http.post('../ajax-php.php', data, config)
.success(function (data, status, headers, config) {
return data;
console.log(data);
})
.error(function (data, status, header, config) {
});
return promise;
}
};
return angRoutes;
});
When the page first load I use one controller to fill the scope;
routesApp.controller('topRoutesCtrl', function topRoutesCtrl($scope,$http, angRoutes) {
angRoutes.async('top').then(function(data) {
$scope.angRoutes = data;
console.log(data);
});
});
This is all working great. But then I use another controller for when the user click on something.
routesApp.controller('navRoutesCtrl', function navRoutesCtrl($scope,$http, angRoutes) {
$scope.update = function(id) {
angRoutes.async(id).then(function(data) {
$scope.angRoutes = data;
console.log(data);
});
}
I am able to see the data I am getting in the console and the id does get passed in the update function and the data is corect but it seams that my scope is not getting updated. it remains the value that was first sent when the page load.
How do I update my scope?
UPDATE
as seen here
In my angular HTML I do a ng-repeat like this
<div ng-controller="topRoutesCtrl" class="ajax">
<div id="ajaxLoader"> <img class="loadingGif" src =" /images/ajax-loader.gif"> </div>
<div data-ng-repeat="r in angRoutes.data" class="routes-block" >
{{r.name}}
</div>
</div>
Now in my angular JS if I do
routesApp.controller('topRoutesCtrl', function topRoutesCtrl($scope,$http, angRoutes) {
angRoutes.async('top').then(function(data) {
$scope.angRoutes = data;
console.log(angRoutes);
});
});
Note that in the console I can see the same thing if I console.log(data) or console.log(angRoutes) My app however will only work if I do $scope.angRoutes = data; and nothing gets displayed if I do $scope.angRoutes = angRoutes;
So maybe I am using the referencve the wrong way in my ng-repeat
you can use wrapper $timeout for manual start $digest cicle
$scope.update = function(id) {
angRoutes.async(id).then(function(data) {
$timeout(function() {
$scope.angRoutes = data;
}
console.log(data);
});
}
but keep in mind that $digest cicle are triggerd automaticly after $http calls and written behavior is strange
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 stuck with this problem:
I'm trying to delete a row from a table by passing the ID of that row (i.e. record) into the path of my API. Unfortunately it isn't recognized. However, when I replace $scope.ID with a hardcoded ID-number, all is working as expected.
This is my code:
Controller:
$scope.go = function(record) {
$scope.ID = record.ID;
}
$scope.deleteRow = function() {
$http.delete("api.php/bml/"+$scope.ID)
.success(function(data, status, headers, config){
console.log('successfully deleted ID: ' + $scope.ID);
})
};
Of course in my HTML I have a TR tag with ng-click="go(record) in it.
Strange enough the right ID number is showing up in the console.log message!
Use like this
$scope.deleteRow = function(ID) {
$http.delete("api.php/bml/"+ID)
.success(function(data, status, headers, config){
console.log('successfully deleted ID: ' + ID);
})
};
EDIT:
<button ng-click="deleteRow(id)">Delete</button>
I am following init function in app.js
$scope.init = function ()
{
if(localStorage.getItem("id")!=null && localStorage.getItem("pass")!=null)
{
alert(localStorage.getItem("id")+" "+localStorage.getItem("pass"));
var id=localStorage.getItem("id");
var pass=localStorage.getItem("pass");
$http({method: 'GET', url: site+'/login-web.php?txt_email='+id+'&txt_password='+pass}).
success(function(data, status, headers, config)
{
if(data=='error')
navigator.notification.alert("Wrong username or password.",null,"Attention.!","Try Again.!");
else
{
localStorage.setItem("id", id);
localStorage.setItem("pass", password);
alert("fire");
$scope.ons.navigator.pushPage('dashboard.html',{title : 'title'});
}
}).
error(function(data, status, headers, config)
{
alert("Please check Mobile Data.");
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
},
and i am fire init from
<body ng-controller="AppController" ng-init="init()">
I want to like this if i am login first time then i need to login and i store id and pass in localstorage and every time when application is load and init method is fire and i check id and pass from localstorage and fire server method to check id and pass if its right login is done automatically.
I am using phonegap + onsenui + angular js.
Problem is from init method
$scope.ons.navigator.pushPage('dashboard.html',{title : 'title'});
is not redirect to dashborad.
There is nothing wrong with $scope.ons.navigator.pushPage('dashboard.html',{title : 'title'});. But I think inside your <body> tag, there is no <ons-navigator> tag which is needed in order to use that function. Moreover, you need to call the function inside a setTimeout otherwise it will be called before the DOM element finishes rendering. Do as follows:
Here is what you need to add to ur controller:
app.factory('DataService', function($http) {
var service = {
requestData: function(url) {
return $http.get(url).then(function(data, status, headers, config) {
service.myData = data;
return service.myData;
});
},
myData: null,
return service;
});
app.controller('AppController', function($scope, DataService)){
$scope.init = function(){ setTimeout($scope.init_wait, 10); };
$scope.init_wait = function () {
if(localStorage.getItem("id")!=null && localStorage.getItem("pass")!=null){
alert(localStorage.getItem("id")+" "+localStorage.getItem("pass"));
var id=localStorage.getItem("id");
var pass=localStorage.getItem("pass");
var url = ite+'/login-web.php?txt_email='+id+'&txt_password='+pass;
DataService.requestData(url).then(function(data, status, headers, config) {
if(data=='error')
navigator.notification.alert("Wrong username or password.",null,"Attention.!","Try Again.!");
else {
localStorage.setItem("id", id);
localStorage.setItem("pass", password);
alert("fire");
$scope.ons.navigator.pushPage('dashboard.html',{title : 'title'});
}
});
}
}
};
Here inside your HTML
<body ng-controller="AppController" ng-init="init()">
<ons-navigator>
<!--Your HTML-->
</ons-navigator>
</body>