There's something wrong when I'm trying to get json file with data into my ng-repeat.
Somehow, in the console appears 'All drinks loaded!' which is success information, but it doesn't show in the DOM.
Also I'm receiving an error: angular.min.js:118 TypeError: $http.get(...).success(...).errors is not a function
If anybody knows what may causing that error, please tell me.
Thanks for help.
var app = angular.module('app', []);
app.controller('MainController', ['$scope', '$http', '$log',
function($scope, $http, $log) {
$scope.drinks = [];
$http.get('drinks.json')
.success(function(data, status, headers, config) {
$scope.drinks = data;
$log.info('All drinks loaded!');
}).errors(function(data, status, headers, config) {
$log.error('Error' + status + 'unable to download drinks list.');
});
}
]);
//drinks.json
//[
//{
//"name": "Pepsi 1l",
//"price": 2.99
//},
//{
//"name": "Orange juice 0.5l",
//"price": 1.40
//},
//{
//"name": "Lemon tea 2l",
//"price": 3.20
//},
//{
//"name": "Cola-Cola 0.33l",
//"price": 0.89
//}
//]
<div class="container">
<div class="content" ng-controller="MainController">
<div class="col-md-6">
</div>
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item" ng-repeat="(id, product) in drinks">
<strong>{{ product.name }}</strong> - {{ product.price | currency }}
<button ng-click="removeFromCart(id)" class="btn btn-xs btn-danger pull-right">X</button>
</li>
</ul>
</div>
</div>
</div>
Its .error() not .errors()
$http.get('url')
.success(function(data, status, headers, config) {
// do something
}).error(function(data, status, headers, config) {
// do something
});
Change it to fix the js error and your page will work fine
Related
I am trying to show angular Post data whenever a tab is clicked using ng-click event.
But it's not working.
What am i doing wrong here?.
First part of code works fine for switching Tabs, But i also want to show dynamic response when any tab is clicked & use it's tabNum as ?id=tabNum in ajax POST
angular.module('tabApp', [])
.controller('TabController', ['$scope', function($scope, $http) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
}]);
I HAVE PROBLEM WITH FOLLOWING CODE, WHERE SHOULD I PLACE IT ?
$http.get('http://localhost:8080/welcome.html?id=$tabNum')
.success(function(data, status, headers, config) {
$scope.tab = data;
})
.error(function(data, status, headers, config) {
// log error
}); }]);
this is my HTML page
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>MY
Reports
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" ng-app="tabApp">
<div class="row" ng-controller="TabController">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{ active: isSet(1) }">
<a href ng-click="setTab(1)">SHOW Manual Admins</a>
</li>
<li ng-class="{ active: isSet(2) }">
<a href ng-click="setTab(2)">SHOW ONE Admins</a>
</li>
<li ng-class="{ active: isSet(3) }">
<a href ng-click="setTab(3)">SHOW TWO Read Admins</a>
</li>
<li ng-class="{ active: isSet(4) }">
<a href ng-click="setTab(4)">SHOW THREE Admins</a>
</li>
<li ng-class="{ active: isSet(5) }">
<a href ng-click="setTab(5)">SHOW FOUR Read Admins</a>
</li>
<li ng-class="{ active: isSet(6) }">
<a href ng-click="setTab(6)">SHOW FIVE Read Admins</a>
</li>
</ul>
</div>
<div class="col-md-8">
<div class="jumbotron">
<div ng-show="isSet(1)">
<h1>CONTENT1</h1>
</div>
<div ng-show="isSet(2)">
<h1>CONTENT2</h1>
</div>
<div ng-show="isSet(3)">
<h1>CONTENT3</h1>
</div>
<div ng-show="isSet(4)">
<h1>CONTENT4</h1>
</div>
<div ng-show="isSet(5)">
<h1>CONTENT5</h1>
</div>
<div ng-show="isSet(6)">
<h1>CONTENT6</h1>
</div>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js'></script>
<script src="app.js"></script>
</body>
</html>
Hey as mentioned in my comment you can use a service for your http calls
.service('HttpService', ['$rootScope', '$http', 'Ls', 'CommonService', 'DateService', function ($rootScope, $http, Ls, CommonService, DateService) {
return {
CallService: function (url, callback) {
$http.get(url)
.success(function (data, status) {
callback(data, status);
}).error(function (data, status) {
callback(data, status);
});
}
}
});
Which can be called from the controller (dont forget to inject HttpService)
.controller('TabController', ['$scope', 'HttpService', function($scope, HttpService) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
HttpService.CallService('http://localhost:8080/welcome.html?id='+newTab, function (data) {
$scope.tabdata = data;
});
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
the whole would look like this
angular.module('tabApp', [])
.controller('TabController', ['$scope', 'HttpService', function($scope, HttpService) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
HttpService.CallService('http://localhost:8080/welcome.html?id='+newTab, function (data) {
$scope.tabdata = data;
});
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
}])
.service('HttpService', ['$rootScope', '$http', function ($rootScope, $http) {
return {
CallService: function (url, callback) {
$http.get(url)
.success(function (data, status) {
callback(data, status);
}).error(function (data, status) {
callback(data, status);
});
}
}
});
Mh maybe the get call maybe console log status and response
So I'm working on a small app with angular 1 with file uploading and I found out that there were changes that I wasn't aware of as the way coding https in a controller is different now. As the old way now causes http.get.success is not a function. I need help understanding what changes from 1.4 angular 1 to the current version that I have to do now with my controllers so my data from my rest API show up on my HTML. As I'm getting $http.get(..).success is not a function error now.
gallerycontroller
var galleryCtrl = angular.module('galleryCtrl', []);
galleryCtrl.controller('galleryController', function($scope, $http) {
$scope.superheroes= [];
//Retrieve all the superheroes to show the gallery
$http({
method: 'GET',
url: '/superhero'
})
.success(function (data, status, headers, config) {
console.log(data);
})
.error(function (data, status, headers, config) {
console.log(data)
})
});
gallery.html
<!-- view the gallery of all the superheroes in the db -->
<div class="row">
<div ng-repeat="superhero in superheroes">
<div class="col-md-4 col-xs-6 col-sm-offset-0">
<div class="thumbnail">
<img ng-src="{{superhero.picture.url | fpConvert: {filter:'sharpen', w:300, h:150} }}" />
<div class="caption text-center">
<h3>{{superhero.name}}</h3>
<p><label>Super powers: </label> {{superhero.superPowers}}</p>
<div class="text-right"><a ng-href="/#/detail/{{superhero._id}}" class="btn btn-danger" role="button">View</a> </div>
</div>
</div>
</div>
</div>
</div>
Success is deprecated. Use then.
$http.get().then(function success(result){
}, function error(err) {
})
The $scope data is not displaying on the page.
I have 2 views that are using the same controller.
I have this view, and I'm clicking the edit issue button
<div class="container" data-ng-init="adminInit()">
<div class="row">
<div class="col-lg-12">
<div class="page-header text-center">
<h1>Issues Admin</h1>
<button type="button" class="btn btn-primary" ui-sref="add-issue">
Add Issue
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Current Issues</h3>
<ul ng-repeat="issue in issues">
<li>
<strong>{{issue.title}}</strong> - Current Status:
<strong>{{issue.status}}</strong>
<div ng-hide="true" class="btn btn-xs btn-primary glyphicon glyphicon-pencil" ng-click="editIssue(issue._id)"></div>
<div class="btn btn-xs btn-primary glyphicon glyphicon-pencil" ng-click="editIssue(issue._id)"></div>
<div class="btn btn-xs btn-danger glyphicon glyphicon-remove" ng-click="deleteIssue(issue._id)"></div>
</li>
<ul>
<li>{{issue.description}}</li>
<li>Issue Logged at: {{issue.timestamp | date:'MM/dd/yyyy # h:mma'}}</li>
</ul>
</ul>
</div>
</div>
</div>
And this in my controller
$scope.editIssue = function(id) {
$state.go('edit-issue');
$http.get(Configuration.API + 'api/issue/' + id)
.then(function successCallback(response) {
$scope.issueToEdit = response.data;
console.log($scope.issueToEdit);
});
};
then the edit-issue view
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header text-center">
<h1>Edit Issue</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form name="frm" ng-submit="updateIssue()">
<div class="form-group">
<label for="editIssueTitle">Issue Title</label>
<input type="text" name="editIssueTitle" id="editIssueTitle" class="form-control" ng-model="issueToEdit.title" required/>
</div>
<div class="form-group">
<label for="editIssueDesc">Issue Description</label>
<textarea name="editIssueDesc" id="editIssueDesc" class="form-control" cols="60" rows="16" ng-model="issueToEdit.description" required></textarea>
</div>
<div class="form-group">
<label for="editIssueStatus">Issue Status</label>
<select name="editIssueStatus" id="editIssueStatus" class="form-control" ng-model="issueToEdit.status" required>
<option value="Identified">Identified</option>
<option value="Investigating">Investigating</option>
<option value="Monitoring">Monitoring</option>
<option value="Resolved">Resolved</option>
</select>
</div>
<button class="btn btn-default" ng-disabled="frm.$invalid">Go</button>
</form>
</div>
</div>
</div>
But the issueToEdit data is never displayed
The console.log line displays the right data
{
"_id": "58135b6e3987b8a90c4fc15b"
"title": "Test"
"description": "Testset"
"timestamp": "2016-10-28T14:06:38.284Z"
"status": "Monitoring"
"__v": 0
}
Any idea why this is happening?
EDIT: Let me clarify a little, when I land on the edit-issue page, I want the issueToEdit data to displayed in the form so that I can then update the info and then save it.
EDIT2: Here is my full controller and app.js
app.controller('issuesController', ['$scope', '$http', '$state', '$interval', 'auth', 'Configuration', function($scope, $http, $state, $interval, auth, Configuration) {
$scope.isLoggedIn = auth.isLoggedIn;
$scope.getIssues = function() {
console.log('retrieving issues');
$http.get(Configuration.API + 'api/issue')
.success(function(data) {
$scope.issues = data;
})
.error(function(data) {
console.log('Error: ' + data);
});
};
$scope.addIssue = function() {
var nIssue = {
'title': $scope.newissue.title,
'description': $scope.newissue.description,
'timestamp': new Date(),
'status': $scope.newissue.status
}
$http.post(Configuration.API + 'api/issue', nIssue)
.success(function(data) {
$state.go('admin');
})
.error(function(data) {
console.log('Error: ' + data);
});
};
$scope.editIssue = function(id) {
$state.go('edit-issue');
$http.get(Configuration.API + 'api/issue/' + id)
.then(function successCallback(response) {
$scope.issueToEdit = response.data;
console.log($scope.issueToEdit);
});
};
$scope.updateIssue = function() {
//ToDo add this logic
};
$scope.deleteIssue = function(id) {
$http.delete(Configuration.API + 'api/issue/' + id)
.success(function(data) {
$scope.issues = data;
})
.error(function(data) {
console.log('Error: ' + data);
});
};
$scope.adminInit = function() {
$scope.getIssues();
$interval($scope.getIssues, 60000);
};
$scope.issueInit = function() {
$scope.getIssues();
$interval($scope.getIssues, 60000);
$(".devInfo").text(navigator.userAgent);
$(".flashVersion").text(FlashDetect.raw);
};
}]);
app.js
var app = angular.module('supportWebsite', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/articles');
$stateProvider
.state('home', {
url: '/',
templateUrl: '/pages/issues/index.html',
controller: 'issuesController'
})
.state('admin', {
url: '/admin',
templateUrl: '/pages/issues/admin/index.html',
controller: 'issuesController',
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}]
})
.state('add-issue', {
url: '/admin/add-issue',
templateUrl: '/pages/issues/admin/add.html',
controller: 'issuesController',
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}]
})
.state('edit-issue', {
url: '/admin/edit-issue',
templateUrl: '/pages/issues/admin/edit.html',
controller: 'issuesController',
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}]
});
$locationProvider.html5Mode(true);
}]);
Your method tells the $state service to go to another state. That will replace the view by the view associated with the new state, create a new $scope, and a new controller instance using this new $scope.
So whatever you put in the $scope of the current controller is irrelevant and useless: the other state uses another $scope and another controller.
You need to pass the ID of the issue to edit as a parameter of the new state. And the controller of this new state (or one of its resolve functions) should use that ID to get the issue to edit.
If you want to stay on the same view, using the same controller and the same scope, then you shouldn't navigate to another state.
I am trying to extract information through facebook API into my ionic app. It shows the messages and dates correctly into my app but no images! I have uploaded the code and demo pictures in here.
Code:
.controller('FeedCtrl', function ($scope, $stateParams, OpenFB, $ionicLoading) {
$scope.show = function () {
$scope.loading = $ionicLoading.show({
content: 'Loading User Feed(s)...'
});
};
$scope.hide = function () {
$scope.loading.hide();
};
function loadFeed() {
$scope.show();
OpenFB.get('/me/feed', {
limit: 30
})
.success(function (result) {
$scope.hide();
$scope.items = result.data;
// Used with pull-to-refresh
$scope.$broadcast('scroll.refreshComplete');
})
.error(function (data) {
$scope.hide();
alert(data.error.message);
});
}
**[<!---ionic---->][1]**
<div ng-repeat="item in items" class="list card">
<div class="item item-avatar">
<img src="https://graph.facebook.com/{{ item.from.id }}/picture" />
<h2>{{item.name}}</h2>
<p>{{item.created_time | date:'MMM d, y h:mma'}}</p>
</div>
<div class="item item-body">
<p ng-if="item.story">{{item.story}}</p>
<p>{{item.message}}</p>
<h2>{{item.from.id}}</h2>
<img ng-if="item.picture" ng-src="{{item.picture}}" />
</div>
</div>
And
I'm working on an mobile app and I'm having problems with getting data to the controller. What i do is i get the data from a service and that works well (on routing this is '/' or root directory):
var listdnModule = angular.module('listdn', []);
listdnModule.factory('getActiveDnService', ['$http', function ($http) {
return {
getActiveDnSvc: function (izvajalecID) {
return $http({ method: 'POST', url: 'svc.aspx/getActiveDN', data: "{'izvajalecID':" + "'" + izvajalecID + "'}", cache: true });
}
};
}]);
listdnModule.controller('listdnCtrl', ['$scope', '$http', 'getActiveDnService','$rootScope', function ($scope, $http, svc, $rootScope) {
$scope.mjav = 1;
svc.getActiveDnSvc($scope.mjav).success(function (data) {
$rootScope.dnlist = data.d;
$scope.listdn = data.d;
});
}]);
So this works fine. It sets the data to the rootScope and to localscope and reads it from local scope.
Then i'm linking the list of Costumers to costumerdetail. The route settings are like this:
mSvc.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'tmpl/listdn.html',
controller: 'listdnCtrl'
}).
when('/settings', {
templateUrl: 'tmpl/nastavitve.html',
controller: 'settings'
}).
when('/dndetail/:dnid', {
templateUrl: 'tmpl/dndetail.html',
controller: 'dndetailCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
The error comes after i try to get dndetail. I get the right ID from $routeParams but i dont get the data in the right time. The code is this:
var dndetail = angular.module('dndetail', []);
dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {
console.log($rootScope.dnlist[0]);
$scope.datal = $rootScope.dnlist;
$scope.id = $routeParams.dnid;
for(var i = 0; i <= datal.length; i++) {
if (datal[i].ID === $scope.id) {
$scope.data = datal[i];
}
}
}]);
And this is the error i get:
As you can see the console.log gets the object and prints the output (I masked it because it's company data) while datal is undefined. The special AngularJS tab in chrome DevTools also says the data is there:
And for the end the template of the view that doesnt get data:
<ul ng-controller="dndetailCtrl" class="list-group">
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Naslov</div>
<div class="pull-right">
<a ng-href="https://maps.google.com/?q={{ data.Ulica }} {{ data.Posta }} {{ data.Kraj }}">
{{ $root.dnlist[1].Ulica }}<br />
{{ data.Posta }} {{ data.Kraj }}<br />
{{ data.Drzava }}</a>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Datum izvedbe</div>
<div id="kupec-pe" class="pull-right">{{ data.DatumIzvedbe }}</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Datum naloga</div>
<div id="kupec-dst" class="pull-right">{{ data.DatumNaloga }}</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Opis:</div>
<div id="kupec-komerc" class="pull-right">{{ data.Opis }}</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Šifra dejavnosti:</div>
<div id="kupec-sif" class="pull-right">{{ data.sifDej }}</div>
</div>
</li>
<li class="list-group-item">
<div class="row info-row-li">
<div class="pull-left">Šifra dejavnosti:</div>
<div id="Div1" class="pull-right">{{ data.DatumIzvedbe }}</div>
</div>
</li>
</ul>
Any ideas?
UPDATE
This is the new controller:
dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {
$rootScope.dnlist;
$scope.id = $routeParams.dnid;
for (var i = 0; i <= $rootScope.dnlist.length; i++) {
if ($rootScope.dnlist[i].ID === $scope.id) {
$scope.data = $rootScope.dnlist[i];
}
}
}]);
still doesnt work. From an array of elements i want to get one element by id and then save it to data so i can read from data. For loop doesnt get the data (unindentified dnlist) but if i bind {{ $root.dnlist[1].Property }} in the template it works.
I don't think problem is fixed by this answer and tried to delete it, I have undelete it as it has been referred in a comment.
$http in angularjs returns a promise, you can't use the promise directly to access the data, check this answer where it answer something very similar.
If anyone was wondering the problem was with the equality operator. If I change === with the one that checks type == i dont get the TypeError: Cannot read property 'ID' of undefined error any more. Since this is the solution to the problem I'd like to have an explanation also. I'm a javascript beginner to be true and if someone got an idea what happened here, I'd very much like to know the explanation.
The new controller that works:
dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {
$rootScope.dnlist;
$scope.id = $routeParams.dnid;
for (var i = 0; i <= $rootScope.dnlist.length; i++) {
if ($rootScope.dnlist[i].ID == $scope.id) {
$scope.data = $rootScope.dnlist[i];
}
}
}]);