How to display the following json in scroll bar using angularjs mvc
myjson whixh i get from api localhost:port/details using nodejs:
[
{
"id": 4,
"notes": "sdas 123",
"invoice": "232",
"objectType": "Customer",
"objectId": 5,
"dateCreated": "2015-09-29T22:54:06.000Z",
"dateModified": "2015-10-08T23:01:16.000Z"
},
{
"id": 10,
"notes": "sample Test",
"invoice": "123",
"objectType": "Customer",
"objectId": 5,
"dateCreated": "2015-09-30T06:38:52.000Z",
"dateModified": "2015-09-30T01:20:38.000Z"
}
]
Any help guys..?
yes i have started and tried like this :in my controller
my config as:
angular.module('customerdetails).config(['$stateProvider',
function($stateProvider) {
$stateProvider.
state('listCust', {
url: '/details',
templateUrl: "/customerdetails/views/listcustomer.client.view.html'
});
}
]);
my service:
angular.module('customer').factory('Customer',function($resource)
{
return $resource('/details');
});
my controller:
angular.module('customerdetails').controller('CustomerController', ['$scope', '$rootScope', '$state', '$stateParams', '$location', 'Authentication', 'Customer', 'InvoiceRefund', '$filter',
function ($scope, $rootScope, $state, $http, $stateParams, $location, Authentication, Customer, $filter) {
var cus = Customer.query(function() {
console.log(cus);
});
To display JSON data you can use follwoing syntax: {{variable | json}} in the template, but for that you need to assign $scope.variable = YOUR_JSON; in your controller code
Related
I have a REST api from elasticsearch. I want to retrieve the data of a specific field. That is, I want to retrieve the data in the Gender field. What I have done is I have consume the rest service in AngularJS as follows. But nothing is appearing on the browser. Can somebody help to achieve what I want to display?
angular.module("view.index", ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/menuIndex/', {
templateUrl: 'view-index/template/index.html',
controller: 'NewController',
controllerAs: 'newCtrl',
});
}])
.controller('NewController', ['$timeout', 'overlayMessage', '$location', 'userInformation', '$http', '$scope','menuService', function ($timeout, overlayMessage, $location, userInformation, $http, $scope, menuService) {
var myCtrl = this;
myCtrl.Form = {};
$http.get('http://admin:admin#localhost:9200/index1/_search?_source=Gender').
success(function(data) {
myCtrl.json = data;
});
}]);
The GET api http://admin:admin#localhost:9200/index-data/_search?_source=Gender returns me a json body like this:
{
"took": 17,
"timed_out": false,
"_shards": {
"total": 5,
"successful": 5,
"failed": 0
},
"hits": {
"total": 30003,
"max_score": 1,
"hits": [
{
"_index": "index1",
"_type": "tbl",
"_id": "1",
"_score": 1,
"_source": {
"Gender": "Female"
}
},
{
"_index": "index1",
"_type": "tbl",
"_id": "2",
"_score": 1,
"_source": {
"Gender": "Male"
}
}
And in my front end, I want to access the data in the Gender field like this:
<div ng-controller="menuNsmCtrl">
<div ng-repeat="json in json">
<p>The ID is {{json.Gender}}</p>
</div>
</div>
First use then instead of success to catch the data. success is deprecated since the angular version 1.4
$http.get('http://admin:admin#localhost:9200/index1/_search?_source=Gender').
then(function(response) {
myCtrl.json = response.data;
});
}]);
now since you use controllerAs syntax you need to use the reference variable in the html also
<div ng-controller="NewController as myCtrl">
<div ng-repeat="json in myCtrl.json.hits.hits">
<p>The ID is {{json['_source'].Gender}}</p>
</div>
</div>
I have a main page displaying a list of houses and when I click on a particular house I want to display the house details. I am trying to achieve this using ui-view however, the house details are not showing.
These are my routes defined:
var app = angular.module('app', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/about');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'app/views/partial-home.html'
})
.state('about', {
url: '/about',
templateUrl: 'app/views/partial-about.html',
controller: 'inventoryCtrl'
})
.state('about.item', {
url: '/:id',
templateUrl: 'app/views/partial-about-item.html',
controller: 'detailsCtrl'
});
});
this is my main page html displaying a list of all houses:
<div ng-repeat="value in all | filter: (!!locationFilter || undefined) && {type: locationFilter} | filter: priceFilter | filter: datesFilter | orderBy:sortProp">
<ul>
<li><img src="app/images/{{value.image}}.jpg" alt="Smiley face" height="100" width="240"></li>
<li><strong>{{value.id}}</strong></li>
<li><strong>{{value.address}}</strong></li>
<li>city: {{value.city}}</li>
<li>postcode: {{value.postcode}}</li>
<li>price: £{{value.price}}</li>
<li>num_of_beds: {{value.num_of_beds}}</li>
<li>{{value.type}}</li>
<li>{{value.minutes}}</li>
<li>{{value.added}}</li>
</ul>
<a ng-href="#/about/{{value.address}}" class="btn btn-primary">View details</a>
</div>
<div ui-view></div>
this is my house details html displaying the house details which is only displaying the static text nothing inside ng-repeat or curly braces is shown
updated html:
<div>
<ul ng-repeat="item in singleHouse track by item.id">
<li>{{item.id}}</li>
<li>{{item.desc}}</li>
</ul>
</div>
this is my page details controller:
app.controller('detailsCtrl', ['$scope', 'DetailsFactory', '$stateParams', '$state', function($scope, DetailsFactory, $stateParams, $state) {
$scope.id = $stateParams.id;
DetailsFactory.getHouseDetails($stateParams.id).then(function(response){
$scope.singleHouse = response.detailsData.details;
console.log($scope.singleHouse);
})
}]);
I have added factory as well for the details house page:
app.factory('DetailsFactory', ['$http', '$stateParams', function($http, $stateParams) {
var urlBase = 'app/default/details.json';
var factory = {};
factory.getHouseDetails = function(id){
return $http.get(urlBase + id);
}
return factory;
}]);
and the json for the details page:
{
"detailsData":{
"details": [
{
"id": 1,
"desc": "Beautiful house blebel eble"
}, {
"id": 2,
"desc": "Beautiful house blebel eble"
}, {
"id": 3,
"desc": "Beautiful house blebel eble"
}, {
"id": 4,
"desc": "Beautiful house blebel eble"
}, {
"id": 5,
"desc": "Beautiful house blebel eble"
}, {
"id": 6,
"desc": "Beautiful house blebel eble"
}, {
"id": 7,
"desc": "Beautiful house blebel eble"
}, {
"id": 8,
"desc": "Beautiful house blebel eble"
}, {
"id": 9,
"desc": "Beautiful house blebel eble"
}, {
"id": 10,
"desc": "Beautiful house blebel eble"
}, {
"id": 11,
"desc": "Beautiful house blebel eble"
}, {
"id": 12,
"desc": "Beautiful house blebel eble"
}]
}
}
$stateParams.item just gives id. In your details controller you should get the house detail from server
app.controller('detailsCtrl', ['$scope', 'InventoryFactory', '$stateParams', '$state', function($scope, InventoryFactory, $stateParams, $state) {
InventoryFactory.getHouseDetail($stateParams.item).then(function(response){
$scope.singleHouse = response.data;
})
}]);
In your html
<ul ng-repeat="item in singleHouse">
<li>{{item.id}}</li>
<li>{{item.desc}}</li>
</ul>
Your ng-href="#/about/{{value.address}}" doesn't match up with your state declaration url: '/:item', it should be url: 'about/:item',
I'm having trouble in fetching specific array in details page. $stateParams needs to be the same with the JSON array id but I can't print that on its template. I really appreciate any help. Thank you.
Services
angular.module('demo', ['ui.router']);
.factory('BookService', ['$http', function($http){
return {list: $http.get('data.json')}
}])
Routes
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/books');
$stateProvider
.state('books', {
url:'/books',
templateUrl: 'templates/books.html',
controller: 'BooksCtrl'
})
.state('books.detail', {
url: '/detail/:id',
templateUrl: 'templates/books-detail.html',
controller: 'BooksDetailCtrl'
});
}])
Controllers
.controller('BooksCtrl', ['$scope', 'BookService', function($scope, BookService){
BookService.list
.success(function(data){
$scope.books = data;
});
}])
.controller('BooksDetailCtrl', ['$scope', '$stateParams', 'BookService',
function($scope, $stateParams, BookService){
$scope.selectedBook = BookService.find(BookService.list, $stateParams.id);
}])
JSON File(data.json)
{ "demo_site": [{
"id": "1",
"title": "Demo 1",
"summary": "Summary 1",
"body": "test demo 1",
"image": "img/compress/placehold.jpg",
"source": "angular/source",
"demo_link": "http://github.com"
}, {
"id": "2",
"title": "Demo 2",
"summary": "Summary 2",
"body": "test demo 2",
"image": "img/compress/placehold.jpg",
"source": "angular/source",
"demo_link": "http://github.com"
}]
}
Templates
books.html
<ul>
<li ui-sref-action="selected" ng-repeat="book in books.demo_site">
<a ui-sref="books.detail({id: book.id})">{{ book.title }}</a>
</li>
</ul>
<div class="detail" ui-view></div>
books-detail.html
<div>
{{selectedBook.title}}
</div>
I've edited your code a bit and it works now. The most important change is mocking the BookService by bookServiceMock (I added it because I don't have access to your service).
app.js
var app = angular.module('demo', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/books');
$stateProvider
.state('books', {
url:'/books',
templateUrl: 'books.html',
controller: 'BooksCtrl'
})
.state('books.detail', {
url: '/detail/:id',
templateUrl: 'books-detail.html',
controller: 'BooksDetailCtrl'
});
}]);
app.service('bookServiceMock', function() {
var books =[{
"id": "1",
"title": "Demo 1",
"summary": "Summary 1",
"body": "test demo 1",
"image": "img/compress/placehold.jpg",
"source": "angular/source",
"demo_link": "http://github.com"
}, {
"id": "2",
"title": "Demo 2",
"summary": "Summary 2",
"body": "test demo 2",
"image": "img/compress/placehold.jpg",
"source": "angular/source",
"demo_link": "http://github.com"
}];
this.getBooks = function() {
return books;
};
this.getBook = function(id) {
for (var i = 0; i < books.length; i++) {
if (books[i].id === id) {
return books[i];
}
}
return null;
}
})
app.controller('BooksCtrl', ['$scope', 'bookServiceMock', function($scope, bookServiceMock){
console.log('BooksCtrl');
$scope.books = bookServiceMock.getBooks();
}]);
app.controller('BooksDetailCtrl', ['$scope', '$stateParams', 'bookServiceMock',
function($scope, $stateParams, bookServiceMock){
$scope.selectedBook = bookServiceMock.getBook($stateParams.id);
}]);
books.html
<ul>
<li ui-sref-action="selected" ng-repeat="book in books">
<a ui-sref="books.detail({id: book.id})">{{ book.title }}</a>
</li>
</ul>
<div class="detail" ui-view></div>
Here is the plunkr: http://plnkr.co/edit/VJxlqguJZGrIutAFLCNc
I'm trying to separate every controller in my angular app, but I have this error:
23:51:38.389 "Error: [ng:areq] http://errors.angularjs.org/1.5.0-rc.0/ng/areq?p0=skillsController&p1=not%20a%20function%2C%20got%20undefined
P/<#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:6:421
sb#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:22:41
Ta#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:22:128
af/this.$get</<#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:84:42
B#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:62:118
v#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:63:115
Vf/<#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:72:397
e/<#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:123:217
pf/this.$get</m.prototype.$eval#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:137:442
pf/this.$get</m.prototype.$digest#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:135:33
pf/this.$get</m.prototype.$apply#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:138:234
g#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:91:372
t#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:95:492
ag/</v.onload#file:///C:/Users/Piotr/Desktop/ver%202/js/angular.min.js:97:31
"1 angular.min.js:111:399
e/<() angular.min.js:111
cf/this.$get</<() angular.min.js:84
e/<() angular.min.js:123
pf/this.$get</m.prototype.$eval() angular.min.js:137
pf/this.$get</m.prototype.$digest() angular.min.js:135
pf/this.$get</m.prototype.$apply() angular.min.js:138
g() angular.min.js:91
t() angular.min.js:95
ag/</v.onload() angular.min.js:97
pkApp.js:
angular.module('pkApp', ['Controllers']).value("version", "1.160110");
controllersModule.js:
angular.module('Controllers', []);
skillsController.js:
angular.module('Controllers', [])
.controller('skillsController', ['$scope', function($scope){
$scope.skills = [
"html",
"css",
"js",
"jquery",
"angularjs",
"php",
"mysql",
"joomla"
];
}]);
portfolioController.js:
angular.module('Controllers', [])
.controller('portfolioController', ['$scope', function($scope) {
$scope.sites = [{
name: "Site1",
href: "http://www.site1.pl",
img: "1"
}, {
name: "Site 2",
href: "http://www.site2.pl",
img: "2"
}, {
name: "Site 3",
href: "http://www.site3.pl",
img: "3"
}];
}]);
It looks like angular see new module and only first controller that was to it, next is treat as function?
Thank you in advance.
A simple Solution could be:
Define a variable with your module in pkApp.js
var app = angular.module('pkApp', []);
You can delete the controllersModule.js
Create your Controllers as follows:
app.controller('skillsController', ['$scope', function($scope){
$scope.skills = [
"html",
"css",
"js",
"jquery",
"angularjs",
"php",
"mysql",
"joomla"
];
}]);
Same thing with your portfolio controller. It doesn't matter how many files you like to use for your controllers.
See also: https://docs.angularjs.org/guide/controller
Hope, that helps...
I have a UserAddController and I want to be able to access a list of countries returned by a Web API. The Web API returns data fine. Here is my app.js where I get the data :
app.factory('Country', function ($resource) {
return $resource(
"/api/country/:Id",
{ Id: "#Id" },
{ "update": { method: "PUT" } });
});
This is my Controller :
var UserAddController = function ($scope, $location, service, User) {
$scope.action = "Add";
$scope.countries = service.countries;
};
I am declaring and creating a service here :
app.factory('CountryService', CountryService);
function CountryService($resource) {
return $resource(
"/api/country/:Id",
{ Id: "#Id" },
{ "update": { method: "PUT" } });
}
I am using the same code as above just for testing purposes. I am injecting this service like this :
UserAddController.$inject = ['$scope', 'CountryService'];
This is my first attempt at dependency injection and I cannot figure out where I am going wrong. The error I currently get is 'service is undefined'. I have tried passing both the service and the Country object to the Controller with the same results. Can anybody give any advice?
EDIT : In my Controller, this populates successfully with an alert in the code, but without the alert does not populate. Any reason why this is?
function CountryService($rootScope, $http) {
var self = {};
//self.countries = [{ "$id": "1", "CountryId": 1, "CountryName": "United Kingdom" }, { "$id": "2", "CountryId": 2, "CountryName": "Republic of Ireland" }, { "$id": "3", "CountryId": 3, "CountryName": "Australia" }, { "$id": "4", "CountryId": 4, "CountryName": "New Zealand" }, { "$id": "5", "CountryId": 5, "CountryName": "United States" }, { "$id": "6", "CountryId": 6, "CountryName": "France" }, { "$id": "7", "CountryId": 7, "CountryName": "Germany" }, { "$id": "8", "CountryId": 8, "CountryName": "Finland" }];
$http({
method: 'GET',
url: '/api/country'
}).success(function (data, status, headers, config) {
self.countries = data;
});
alert(self.countries);
return self;
}
You need to add other services/dependencies.
UserAddController.$inject = ['$scope',
'$location',
'CountryService',
'UserService'];
I have assumed that last dependency is a service with name 'UserService'. It's signature would be
app.factory('UserService', UserService);
Edit :
You need to instantiate a new variable.
//Inside function body
$scope.countries = service.countries;
$scope.newCountry = $scope.countries.get({Id : someId},callbackFn);
Now you have a counrtry with 'someId' in $scope.newCountry
Make sure you injected ngResource.
app = angular.module("app", ['ngResource']);
You need to inject the modules correcly
UserAddController.$inject = ['$scope', '$location', 'CountryService', 'user'];
This is quoted the doc.
You can specify the service name by using the $inject property, which
is an array containing strings with names of services to be injected.
The name must match the corresponding service ID registered with
angular. The order of the service IDs matters: the order of the
services in the array will be used when calling the factory function
with injected parameters.
I created a FIDDLE and you can try.