Understand that for POST method, the key - Data is being used instead of Params, however if the data is being used for filtering is it possible to have conditions for these Data ?
var proxyData = {
lecturer_id: "e9d0bea0-76cb-11e8-adc0-fa7ae01bbebc",
status: ["pending", "accepted"]
};
try {
$http({
method: $scope.proxyMethod,
url: url,
data: proxyData
}).
success(function(data, status, headers, config) { }).
error(function(data, status, headers, config) { });
In the above example, I would like to filter out lecturer_id with the exact match, but with status of either "pending" or "accepted".
Is it possible to do something like GET params - "?status=pending,accepted"
Thanks in advance and sorry if my question has any misunderstanding of how AngularJS works as I am still new to it.
Related
My Laravel route is :
Route::get('/get_event_history/{data}/{date}', 'HomeController#GetEvents')->name('get_event_history');
and I wanted to pass two routes. I am doing like this:
$scope.HistoryEventClick=function(imei,date){
var Indata = {'data': imei, 'date': date };
$http.get('/get_event_history/',params: Indata).success(function (data, status, headers, config){
console.log("Event Data from the query",data.data);
}).error(function (data, status, headers, config) {
//alert(status)
});
}
Its not working and gives error route not found
You may need to change to this:
$http.get(`/get_event_history/${imei}/${date}`).......
$http.get('/get_event_history/'+$routeParams.imei +'/date/'+ $routeParams.date)
In angular, I want to download a text file containing a csv of userdata. Usually I have a form with a post action, but I want the user to stay on the same page, but return the csv data without any page referesh. The following is my post command:
$http({
url: "api/getUserData",
method: "POST",
data:{user_id:app.user_id}
}).success(function(data, status, headers, config) {
// data gets returned here
}).error(function(data, status, headers, config) {
$scope.status = status;
});
My problem is, the "data" that comes back from the post is a csv file. how can I get the data to actually "download" to the user's computer instead of living in the javascript? Is this even possible?
Here is the link to solution. It uses HTML5 FileSaver API to save the file as BLOB
You can do this :
Create temporary anchor ,
encode, your data & name your file using download attribute,
and then, fire a click event on it.
finally, remove the inserted element .
$http({
url: "api/getUserData",
method: "POST",
data:{user_id:app.user_id}
}).success(function(data, status, headers, config) {
// data gets returned here
var anchor = angular.element('<a/>');
angular.element(document.body).append(anchor); // Attach to document
anchor.attr({
href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
target: '_blank',
download: 'myFileName.csv'
})[0].click(); // fire a click event.
anchor.remove(); // Clean it now ...
}).error(function(data, status, headers, config) {
$scope.status = status;
});
I want to make a POST request using Angular. I am using ng-submit to submit the form to the controller where I access the factory to make the request using:
$http.post('/droplets', data)
I need the data from the form fields to put in the "data" variable above to send to my API but I can't work out how to do this when it is more than one field. How is this done?
Try this...
$http({
url: '/droplets',
method: "POST",
data: JSON.stringify({application:app, from:data1, to:data2}),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
Ref:https://docs.angularjs.org/api/ng/service/$http
$http({
url: Config.ApiURL + "/site/go",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param(testimony)
}).progress(function (data, status, headers, config) { //Not sure about this line
console.log('progressing');
}).success(function (data, status, headers, config) {
console.log('success');
});
I want to display something before it successes or error, so im not sure about .progress part, i just inserted it there as an example and for you to imagine my problem.. is it possible? is there a built-in function for that?
BTW, im new to angular. TIA :)
According to some post I found on github (https://github.com/angular/angular.js/issues/1934 , see the post from 26th april 2014), you should be able to do it like that :
$http({method: 'GET', url: '/someUrl',progress:trackProgress}).then(function(result){
// handle result
});
Where tarckProgress would be a callback to call to handle the progress state.
If you want to show the progress spinner / bar, and in addition to that if you want to show something else, you can use angular-loading-bar
I have have spent hours trying all of the different methods given online but nothing works. I just simply want to load a script to run after all images have loaded. Is there something about Angular that won't allow me to do this? I'm using $routeProvider:
var photos = {
name: 'photos',
url: '/photos',
views: {
main: {
templateUrl: "views/photos/photos.html",
controller: function($scope,$http){
$http({
url: 'get/photos',
method: "POST"
})
.success(function (data, status, headers, config) {
$scope.data = data;
// this doesn't work
$(window).load(function() {
myScript();
});
})
.error(function (data, status, headers, config) { $scope.status = status; });
}
}
}
};
By the way, I'm not getting any errors in the console.
It seems to me that the http POST call retrieves the photos. And I am suppose that myScript is a function. So why not try this:
var photos = {
name: 'photos',
url: '/photos',
views: {
main: {
templateUrl: "views/photos/photos.html",
controller: function($scope,$http){
$http({
url: 'get/photos',
method: "POST"
})
.success(function (data, status, headers, config) {
$scope.data = data;
myScript();
})
.error(function (data, status, headers, config) {
$scope.status = status;
});
}
}
}
};
since the myScript function only runs after the POST succeeds. I am supposing that the data refers to the actual image data.
I don't know if I really understood what type of data you are trying to get, but I think you could try with promises
$http in Angular already return a promise wrapped in .success or .error, but you can also use the .then() callback like with every other promise
So if the problem is to wait for the success() callback to be finished you could do something this way, replacing it by several then() :
$http.post(...).then(
//function which will wait for the data to be downloaded
//here you can alter data, check some values etc...
).then(
//the script for what you want after
myScript();
);
I made a little fiddle to explain : http://jsfiddle.net/Kh2sa/2/
It simulates a long response time with $timeout, so you have to wait 3 secondes to see your modified data, which remains in its initial state until you call the myScript() function
AFAIK, Angular does not provide a way to inform us when images have finished loading.
You will need to write your own directive for this. The directive would wrap the necessary JavaScript/jQuery code that would detect the finished loading condition for one or more images.
jQuery callback on image load (even when the image is cached) and https://github.com/desandro/imagesloaded might help.