app.controller('contentixaeng', function ($scope, $http) {
$scope.subject = function(){
$scope.code=101;
};
$http({
method: "POST",
data:{
'subj_code':$scope.code, 'action':'singledata'
},
url: "pages/Entries/connectixa.php"
}).then(function mySuccess(response) {
$scope.users = response.data;
}, function myError(response) {
$scope.error = response.data;
});
});
I am trying to pass the value of $scope.code to data in HTTP service. It's not working properly and no data value is shown as output. Instead, I get the error "ng-repeat dupes".
The function subject get called through this line
<li class="nav-item" ng-contoller="contentixaeng"><a class="nav-link" href="#" ui-sref="ixaeng" ng-click="subject()" >English</a></li>
If I change the code like shown below then it works
app.controller('contentixaeng', function ($scope, $http) {
$scope.subject = function(){
$scope.code=101;
};
$http({
method: "POST",
data:{
'subj_code':101, 'action':'singledata'
},
url: "pages/Entries/connectixa.php"
}).then(function mySuccess(response) {
$scope.users = response.data;
}, function myError(response) {
$scope.error = response.data;
});
});
I want different data to be passed to the database search based on the on-click event.
The http request is sent immediatly when the controller is created. At this point $scope.code is not yet set.
Try something like this:
app.controller('contentixaeng', function ($scope, $http) {
$scope.subject = function(){
$scope.code=101;
callBackend();
};
function callBackend() {
$http({
method: "POST",
data:{
'subj_code':$scope.code, 'action':'singledata'
},
url: "pages/Entries/connectixa.php"
}).then(function mySuccess(response) {
$scope.users = response.data;
}, function myError(response) {
$scope.error = response.data;
});
});
}
Like this the http request is sent only when the callBackend method is explicitly called.
If you're receiving ng-repeat dupes error that means that you've got duplicated entries in $scope.users- try debugging that and see what's going on there. Also, you can use track by option like below:
ng-repeat="user in users track by $index"
It will assure that each user will be treated as unique entity, even if you have duplicated entries in $users variable.
Another thing is, where this piece of code is run? I do not see it anywhere in the code you provided
$scope.subject = function(){
$scope.code=101;
};
Related
First Case
angular.module('tss.application').controller("UserspaceController", function($scope, $http)
{
$http(
{
url : "/dirlist",
method : "GET",
}).then(function successCallback(response)
{
$scope.lists = response;
},
function errorCallback(response)
{
window.alert("Dir list could not be get");
});
});
Second Case
angular.module('tss.application').controller("UserspaceController", function ($scope, $http)
{
$http.get('dirlist').success(function(data)
{
$scope.lists = data;
});
});
I am very new to Angularjs so this could be a stupid questions. Anyway,
the assignment of lists variable works in second case but in first. That is, the second can access the values of "lists" inside the controllers. I failed to understand what is wrong with the first case?
angular.module('tss.application').controller("UserspaceController", function($scope, $http)
{
$http(
{
url : "/dirlist",
method : "GET",
}).then(function successCallback(response)
{
$scope.lists = response.data;
},
function errorCallback(response)
{
window.alert("Dir list could not be get");
});
});
put $scope.lists = response.data;, will work
Try this:
angular.module('tss.application').controller("UserspaceController", function($scope, $http)
{
$http(
{
url : "/dirlist",
method : "GET",
}).then(function successCallback(response)
{
$scope.lists = response.data;
},
function errorCallback(response)
{
window.alert("Dir list could not be get");
});
});
The deprecated success() method passes two separate values for data and headers, but the promise interface using .then() passes only a single response value which has the data and headers as attributes.
The change to your code is simply the line:
$scope.lists = response.data;
I have done this using $http.post as below:
$http({
method: 'POST',
url: 'www.someurl'+myid
}).then(function successCallback(response) {
console.log(response)
}, function errorCallback(response) {
console.log(response)
});
Requirement is to make the same post call using $resource. I tried as below:
filter:
saffModuleServices.factory('Projects', ['$http', '$resource', '$appConstants',
function ($http, $resource, $appConstants) {
$http.defaults.useXDomain = true;
delete $http.defaults.headers.common['X-Requested-With'];
var createDraftEndPoint=www.someurl/:id;
var saveEmailDraftEndPoint=www.someurl.com
return {
saveEmailDraft: function(){
return $resource(saveEmailDraftEndPoint, {}, {
update: {method: 'PUT', params: {},headers: {'Content-Type':'application/json'}}
});
},
createDraft: function(){
return $resource(createDraftEndPoint, {}, {
post: {method: 'POST',param{id:''}}
});
},
}
}]);
controller:
saffModuleControllers.controller('ctrl', ['$scope', 'SaffNotification','Projects','$filter',
function ($scope, Notification,Projects,$filter) {
Projects.createDraft().post({id:myid}, function(response){
Notification.success({message: $filter('translate')('administration_item_save_notification'), templateUrl: 'common/templates/toastr_success_template.html'});
}, function(response){
Notification.error({message: response.data.errorMessage, templateUrl: 'common/templates/toastr_error_template.html'});
});
}]);
error:
myId is going as data for this request, but I want to send that as param and no data should be sent. I could do that using $http.post
Can anyone suggest me how to make this request in $resource.post without editing $httpProvider in config, because I dont want to make 'data' parameter nil for other POST request.
I'm using Angular in an application. After getting a specific object (a movie in my case), I'm assigning the object to $scope ($scope.movie = response), so that I can use it in the view. The problem is that my view seems not to display anything I use in $scope. I've tried deleting everything and doing a dummy test like $scope=name="whatever" and when I use something like {{name}} in the view nothing is rendered. Have anyone faced this problem ? I've already searched for this error, and it seems like it would be a good idea to use $apply(). I've tried that and it didn't work. The function that fetches the data is below:
var app = angular.module('movies');
app.factory('Films', ['$resource',function($resource){
return $resource('/films.json', {},{
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
})
}]);
app.factory('Film', ['$resource', function($resource){
return $resource('films/:id.json', {}, {
show: {method: 'GET' },
update: { method: 'PUT', params: {id: '#id'} },
delete: { method: 'DELETE', params: {id: '#id'} }
});
}]);
app.controller('MoviesController', ['$scope', '$http', '$location', '$resource', '$routeParams', 'Films', 'Film', function($scope, $http, $location, $resource, $routeParams, Films, Film){
$scope.movies = Films.query();
$scope.user = document.getElementById('name').innerHTML; // Find a better way to interact with devise via angular
$scope.createMovie = function() {
$scope.movies = Films.query();
$http.get(
'/categories.json'
).success(function(data,status,headers,config){
$scope.categories = data;
}).error(function(data, status, headers, config){
alert("There was an error while fetching the categories on the database. Error " + status);
});
$location.path("/" + 'new').replace();
};
$scope.listMovies = function() {
$location.path("/").replace();
};
$scope.save = function(){
if($scope.form.$valid){
Films.create({film: $scope.movie}, function(){
$scope.form.$setPristine();
}, function(error){
alert("Movie not created");
});
}
};
$scope.deleteMovie = function(movie){
Film.delete(movie);
$scope.movies = Films.query();
};
$scope.viewDetails = function(movie){
$scope.name="ola";
alert(movie.id);
$location.path("/" + movie.id);
var Movie = $resource('films/:filmId'+'.json', {filmId: '#id'});
$scope.movie = Movie.get({filmId: movie.id});
$scope.movie.$promise.then(
function(response){
$scope.$apply();
$scope.movie = response;
console.log("filme e: " + response.name);
},
function(error){
console.log("request failed");
}
);
};
}]);
I had a look at your repository and I think where your problem is. You are trying to reuse the MoviesController in all of your routes. But AngularJS will create a new instance for every route and therefore you can't access your previous data because it will be destroyed.
So I would start by creating a separated controller for each view, so you can move the code of your viewDetails method to a new MovieDetailController. To have access to the movie id in this controller, you need to use the $routeParams service.
angular.module('movies').controller('MovieDetailController', MovieDetailController);
function MovieDetailController($scope, $resource, $routeParams) {
var Movie = $resource('films/:filmId'+'.json', {filmId: '#id'});
Movie.get({filmId: $routeParams.id}).then(
function(response) {
$scope.movie = response;
},
function(error){
console.log('request failed');
}
);
}
Change your route definition to use the new controller.
.when('/movies/:id', {
controller: 'MovieDetailController',
templateUrl: 'movie_details.html'
})
And now your viewDetails method in the MoviesController just need to redirect to the movie detail url.
$scope.viewDetails = function(movie) {
$location.path('/movies/' + movie.id);
}
I hope it works for you. Let me know when you try!
I´m trying to create an angular function inside on Service to return acess data via $http and then return to a desired scope.
So my service it something like this;
app.service('agrService', function ($http) {
this.testinho = function(){
return "teste";
}
this.bannerSlides = function(){
var dataUrl = "data/banner-rotator.json";
// Simple GET request example :
$http({
method: 'GET',
dataType: "json",
url: dataUrl
})
.success( function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
//console.log(data);
return data;
}).error( function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
alert("Niente, Nada, Caput");
});
}
})
Then i want to associate the returned data to a scope inside of my main App controller... like this:
app.controller('AppCtrl', function($scope, $http, agrService) {
$scope.slides = agrService.bannerSlides();
})
Then in my template i want to loop the data like this:
<div ng-repeat="slide in slides">
<div class="box" style="background: url('{{ slide.url }}') no-repeat center;"></div>
</div>
The problem is that the data it´s only available on success and i don´t know how to pass it to my scope slides!!!!!
What i´m doing wrong?
Many thanks in advance
bannerSlides() doesn't return the values you need right away. It returns a promise that you can use to obtain the value at a later time.
In your service you can use the .then() method of the promise that $http() produces to do initial handling of the result:
return $http({
method: 'GET',
dataType: "json",
url: dataUrl
}).then(function (data) {
// inspect/modify the received data and pass it onward
return data.data;
}, function (error) {
// inspect/modify the data and throw a new error or return data
throw error;
});
and then you can do this in your controller:
app.controller('AppCtrl', function($scope, $http, agrService) {
agrService.bannerSlides().then(function (data) {
$scope.slides = data;
});
})
Use this in your service
....
this.bannerSlides = function(){
var dataUrl = "data/banner-rotator.json";
return $http({
method: 'GET',
dataType: "json",
url: dataUrl
});
};
...
And this in your controller
agrService.bannerSlides().then(function(data) {
$scope.slides = data;
}, function() {
//error
});
you don't need $q promise inside the service because the $http is returning a promise by default
The $http service is a function which takes a single argument — a configuration object — that is
used to generate an HTTP request and returns a promise with two $http specific methods: success and error
reference
here is a Fiddle Demo
You need to return a promise and update your scope in the callback:
app.service('agrService', function ($q, $http) {
this.bannerSlides = function(){
var ret = $q.defer();
var dataUrl = "data/banner-rotator.json";
// Simple GET request example :
$http({
method: 'GET',
dataType: "json",
url: dataUrl
})
.success( function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
ret.resolve(data);
}).error( function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
ret.reject("Niente, Nada, Caput");
});
return ret.promise;
}
})
app.controller('AppCtrl', function($scope, $http, agrService) {
$scope.slides = null;
agrService.bannerSlides().then(function(data){
$scope.slides = data;
}, function(error){
// do something else
});
})
You can't return a regular variable from an async call because by the time this success block is excuted the function already finished it's iteration.
You need to return a promise object (as a guide line, and preffered do it from a service).
Following angular's doc for $q and $http you can build yourself a template for async calls handling.
The template should be something like that:
angular.module('mymodule').factory('MyAsyncService', function($q, http) {
var service = {
getData: function() {
var params ={};
var deferObject = $q.defer();
params.nameId = 1;
$http.get('/data', params).success(function(data) {
deferObject.resolve(data)
}).error(function(error) {
deferObject.reject(error)
});
return $q.promise;
}
}
});
angular.module('mymodule').controller('MyGettingNameCtrl', ['$scope', 'MyAsyncService', function ($scope, MyAsyncService) {
$scope.getData= function() {
MyAsyncService.getData().then(function(data) {
//do something with data
}, function(error) {
//Error
})
}
}]);
I want create 1 service where i can POST the data and on success i can again GET the data and update the $scope.variable??
How to do that?
I've tried this way:
angular.module('mvc')
.factory('ajaxService', function($http) {
return {
getAjaxData: function(response) {
$http.get(url).success(response);
return response;
},
postAjaxdata: function(postData){
$http({
method: "post",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
url: url,
data: data
})
.success(function(response){
ajaxService.getAjaxData(function(response) {
$scope.foo = response;
});
});
}
}
});
Capture this in postAjaxdata() to be used in the success callback to call getAjaxData().
You don't have access to the scope inside of the service (nor do you want to access it from a service). The Angular convention is to return a promise to the controller so that it can apply the response value to the scope when the promise is resolved. You can also do this using callbacks (to be consistent with the code that was posted). Here, I've added a callback to postAjaxdata()...
angular.module('mvc')
.factory('ajaxService', function($http) {
return {
getAjaxData: function(successCallback) {
$http.get(url).success(successCallback);
return successCallback;
},
postAjaxdata: function(postData, successCallback){
var that = this;
$http({
method: "post",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
url: url,
data: data
})
.success(function(){
that.getAjaxData(successCallback);
});
}
}
});
The controller should look something like this...
function controller ($scope, ajaxService) {
// ...
ajaxService.postAjaxdata(postData, function (response) {
$scope.foo = response;
});
}
The main issue is that you can't set scope variables in the way you attempted to from the service.
You could instead use the $q service to return a promise which, when resolved, is set to your $scope.foo variable:
.factory('ajaxService', function($http, $q) {
var ajaxService = {
getAjaxData: function() {
return $http.get(url);
},
postAjaxdata: function(postData){
var deferred = $q.defer();
$http({
method: "post",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
url: url,
data: postData
})
.success(function(){
deferred.resolve(ajaxService.getAjaxData());
});
return deferred.promise;
}
};
return ajaxService;
});
You'll also notice that I set the body of your factory to a named variable, which you can then use to call functions internally (as you did with ajaxService.getAjaxData()) before returning.
Then, in your controller, you could set your scope variable like this:
.controller('MyController', function($scope, ajaxService){
ajaxService.postAjaxdata().then(function(results){
$scope.foo = results.data;
})
})
Working Plunker
Note: my answer is not entirely dissimilar to Anthony Chu's. I noticed that he posted his just before mine, but I went ahead anyway since mine takes a slightly different approach, utilizing promises instead of callbacks.