I am using angularjs ngresource to fetch a list of data from database on button click. But when i click button nothing happens. What i am doing wrong.
app.js
'use strict';
var App = angular.module('app',['ngResource']);
graph_service.js
'use strict';
App.factory('Graph', ['$resource', function ($resource) {
return $resource(
'http://localhost:8080/SPsystem/stats'
);
}]);
graph_controller.js
'use strict';
App.controller('GraphController', ['$scope', 'Graph', function($scope, Graph) {
var self = this;
self.graph= new Graph();
self.graphs=[];
self.fetchAllstats = function(){
self.graphs = Graph.query();
}
}]);
minimal html
<body ng-app="app" class="ng-cloak">
<div class="generic-container" ng-controller="GraphController as ctrl">
<div class="panel panel-default">
<div>
<input type="button" ng-click="fetchAllstats()" value="Fetch" class="btn btn-success">
</div>
<div class="panel-heading"><span class="lead">List</span></div>
<div class="tablecontainer">
<table class="table table-hover">
<thead>
<tr>
<th>x</th>
<th>y</th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in ctrl.graphs">
<td>{{g.x}}</td>
<td>{{g.y}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
You don't have a method named query in your factory,
Change your factory like this,
App.factory('Graph', ['$resource', function ($resource) {
{
// Resource object
var resource = $resource('http://localhost:8080/SPsystem/stats');
/* Custom function to retrieve a issue list*/
resource.query= function () {
return this.query()
};
return resource;
})
Related
I'm trying to show the data from my database using ng-repeat. However when I try to retrieve the equipment data under system. It shows it as a json format. How do i retrieve the other nodes under equipments? Need help.
My Angular
/*global angular*/
var app = angular.module('input', ['ngRoute', 'firebase']);
app.config(['$routeProvider', function ($routeProvider) {
'use strict';
$routeProvider.when('/input', {
templateUrl: 'input/input.html',
controller: 'inputCtrl'
});
}]);
app.controller('inputCtrl', ['$scope', '$firebaseObject', '$firebaseArray', function ($scope, $firebaseObject, $firebaseArray) {
'use strict';
$scope.message;
$scope.writeUserData = function (equipment, system) {
firebase.database().ref('data/' + $scope.system + '/equipments').child(equipment).set({
equipment: equipment
});
$scope.message = "Added"
};
var ref = firebase.database().ref();
var data = ref.child("data");
var list = $firebaseArray(data);
list.$loaded().then(function(data) {
$scope.data = data;
console.log($scope.data);
}).catch(function(error) {
$scope.error = error;
});
}]);
My Html
<tr data-ng-repeat="data in data">
<td class="select" align="center">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>{{data.$id}}</span>
<ul class="dropdown">
<li>{{data.equipments}}</li>
</ul>
</div>
</td>
</tr>
have your tryed to change
data in data
to some thing like
d in data
also to iterate equipments you will need one more ng-repeat
<li ng-repeat= "equipment in d.equipments">{{data.equipments}}</li>
havent tested the code!
Alright I found a solution to my problem.
<tr data-ng-repeat="d in data">
<td class="select" align="center">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>{{d.$id}}</span>
<ul class="dropdown">
<li data-ng-repeat="equipment in d.equipments"><a>{{equipment.equipment}}</a></li>
</ul>
</div>
</td>
</tr>
I have an AngularJS Application which uses ngRoute to handle the routing of the app. The routing itself is working (the URL is being redirected to the correct page and the correct partial is open) however, I cannot retrieve the item which I need in the second page.
The first page lets you search for a list of documents (dummy at the moment but will eventually link to an API). The list items are clickable and will route you to the second page where the details of the document are listed.
I will outline the way I am attempting to achieve this at the moment but I am open to suggestions if anyone has ideas about how this solution can be improved.
app.js
angular.module("app", ["ngRoute", "ngAnimate"])
.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "Views/main.html",
controller: "MainController"
})
.when("/document/:id", {
templateUrl: "Views/document.html",
controller: "DocumentController"
})
.otherwise({redirectTo: "/main"});
});
main.html
<link rel="stylesheet" href="Stylesheets/main.css" type="text/css">
<div id="docSearchPanel" class="col-xs-12">
<ng-include src="'Views/Partials/documentSearchForm.html'"></ng-include>
</div>
<div id="formSearchResultsArea">
<div id="documentsFoundHeader">Documents Found</div>
<div id="documentsTableContainer">
<table id="documentsTable" class="table">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="doc in documents" ng-click="showDocument()">
<td>{{doc.documentID}}</td>
<td>{{doc.documentTitle}}</td>
<td>{{doc.documentStatus}}</td>
</tr>
</tbody>
</table>
</div>
</div>
main.ctrl.js
angular.module("app").controller("MainController", function($scope, $location){
//This is populated by a function I have removed to keep the code simple
$scope.documents = []
$scope.showDocument = function(){
$scope.activeDocument = this.doc;
$location.path("document/"+this.doc.documentID);
};
});
document.html
<form ng-submit="downloadForm()" class="col-xs-12 col-md-6">
<h2>Document Details</h2>
<div class="row">
<h3>{{activeDocument.documentTitle}}</h3>
</div>
<div class="row" ng-repeat="field in selected.fields">
<div class="form-group">
<div class="document-attribute-header col-xs-5">{{field.key}}</div>
<div class="document-attribute-value col-xs-7">{{field.val}}</div>
</div>
</div>
</form>
document.ctrl.js
angular.module("app").controller("DocumentController", function($scope, $location, $routeParams){
$scope.activeDocument = getActiveDocument($routeParams.id);
function getActiveDocument(id){
for (var d in $scope.documents){
var doc = $scope.documents[d];
if (doc.documentID == id)
return doc;
}
}
});
The $scope-objects in the two controllers are not the same. You either make "documents" a member of the $rootScope (which you would need to inject in both controllers) or you make a documents-service which you inject.
Hope, that helped.
Hello I am trying to get a url from my api using the ngResource and I have a service that returns the resource. However when I call it inside my controller is gives me an error of Cannot read property 'query' of undefined.
Why is this happening?
This is my service :
(function() {
var app = angular.module('test');
app.service('ContactResource', ['$resource', function($resource) {
return $resource('/contacts/:firstname', {firstname: '#firstname'},
{
'update': {method: 'PUT'}
}
);
}]);
}());
This is my controller
(function() {
var app = angular.module('test');
app.controller('contactsCtrl', ['ContactResource', function($scope, Contacts, ContactResource) {
$scope.contacts = ContactResource.query();
}]);
}());
And this is my HTML
<table class="table table-bordered">
<thead>
<th>Firstname <input type="search" class="pull-right"></th>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>
<a ng-href="/{{ contact.firstname }}">{{ contact.firstname }}</a>
</td>
</tr>
</tbody>
</table>
Here is your problem:
['ContactResource', function($scope, Contacts, ContactResource)
You need to also inject $scope and Contacts into the array, like this:
['$scope', 'Contacts', 'ContactResource', function($scope, Contacts, ContactResource)
Or Angular will think that 'ContactResource' is the same as $scope.
Getting error "cannot set property gridDim of undefined" while using ng-grid in angular js. i have already declared vm.gridOptions = { data: 'vm.course_view'};.plz help me
<section class="mainbar">
<section class="matter">
<div class="container">
<div class="row" ng-controller="Course_view">
<div class="col-lg-5 col-lg-offset-2">
<div class="widget wblue">
<div vis-widget-header title="{{vm.title}}"></div>
<div class="widget-content user">
<!-- <table data-toggle="table" data-height="150" class="table table-condensed table-hover">
<thead>
<tr>
<th>Lesson</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in vm.course_view"
>
<td>{{c.firstName}}</td>
</tr>
</tbody>
</table> -->
<div class="gridStyle" ng-grid="course_view"></div>
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</section>
Here is Code for controller
(function() {
'use strict';
angular
.module('app.course_view')
.controller('Course_view', Course_view);
/* #ngInject */
function Course_view($state, dataservice, logger) {
var vm = this;
vm.course_view = [];
vm.title = 'Course_view';
vm.gridOptions = { data: 'vm.course_view', columnDefs: [
{field:'firstName', displayName:'firstName'}
]};
activate();
function activate() {
return getCourse_View().then(function() {
logger.info('Activated course_view View');
});
}
function getCourse_View() {
return dataservice.getCourse_View().then(function(data) {
vm.course_view = data;
debugger;
return vm.course_view;
});
}
}
})();
Please, try to change the following code:
<div class="row" ng-controller="Course_view">
on
<div class="row" ng-controller="Course_view as courseCtrl">
and
<div class="gridStyle" ng-grid="course_view"></div>
on
<div class="gridStyle" ng-grid="courseCtrl.course_view"></div>
And please, give me feedback about your success/fail in comments.
UPDATE:
I've created JSFiddle for you with working example.
I'm a little bit simplified example, but it should work.
<div ng-controller="CourseViewCtrl as ctrl">
<div class="gridStyle" ng-grid="ctrl.gridOptions"></div>
</div>
(function() {
'use strict';
var myApp = angular.module('myApp',['ngGrid']);
myApp.controller('CourseViewCtrl', CourseViewCtrl);
function CourseViewCtrl($http) {
var vm = this;
vm.course_view = [];
vm.gridOptions = {
data: 'ctrl.course_view'
};
activate();
function activate() {
return $http.get("/data").success(function(data) {
vm.course_view = data;
});
};
}
})();
I want to note on main differences between your code:
Grid options in the controller:
vm.course_view = [];
vm.gridOptions = {
data: 'ctrl.course_view'
};
Grid on the view:
<div class="gridStyle" ng-grid="ctrl.gridOptions"></div>
I need to get data from $scope.List2 object:
<div ng-app="App">
<div id="firstlist" ng-controller="Controller">
<table id="requesttable" class="RequestTable">
<tr ng-repeat="item2 in List2">
<td class="selectedItem">{{item2.Title}}</td>
</tr>
</table>
<button id="Reqbutton" onclick="SendRequest()">Send</button>
</div>
</div>
The problem is that if I put SendRequest function inside controller then it cannot be called (I get "SendRequest() is not defined" message). And if I put the function outside the controller I cannot access List2.
What do I miss?
As #sp00m suggested. You should use ng-click instead of onclick on the button. The html would look like this then:
<button id="Reqbutton" ng-click="sendRequest()">Send</button>
In your controller
app.controller('testController', ['$scope', function {
$scope.list2 = [];
$scope.sendRequest = function() {
var test = $scope.list2;
...
};
}]);