I used all possible dependencies available on net but couldn't able to solve the issue.
Back End code is written using ASP .NET and MVC returns Json data.
Below is my controller Code
var app = angular.module('myTaskFormApp', [])
app.controller('MyTaskController', function ($scope, $http, $location, $window) {
$scope.TaskModel = {};
$scope.message = '';
$scope.result = 'colour-default';
$scope.isViewLoading = false;
$scope.List = null;
$scope.List1 = null;
var TaskNo = getQueryVariable('TaskNo');
getallData();
//******=========Get All Resources=========******
function getallData() {
debugger;
$http.get('/Dashboard/GetMyTasks?TaskNo=0').then(function (data, status, headers, config) {
$scope.List = data.data;
$('.dataTable-length').dataTable();
}, function (data, status, headers, config) {
$scope.errors = [];
$scope.message = 'Unexpected Error while saving data!!';
console.log($scope.message);
});
};
});
I tried using datatable='ng' even that din't work.
Below is my HTML Code.
I'm getting data but at last I'm getting
No data found
.
As I click the table to sort my data; all data is wiped out.
Anchor tag is also not working in the link. The link never hits the controller.
<table class="table table-striped table-bordered tab-pane dataTable-length" cellspacing="0" width="100%">
<thead>
<tr>
<th>Task Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="TaskModel in List | filter : paginate | filter:search" ng-class-odd="'odd'">
<td>{{TaskModel.TaskName}}</td>
<td>{{TaskModel.Status}}</td>
</tr>
</tbody>
</table>
Im getting Data Not found at bottom of table
Related
I'm trying to access data that is on the $scope on a view where the app lands after clicking a button but it seems as if after using $location.path(url) to do the redirection the APP cannot see a variable that exists on the $scope anymore.
Form with the button:
<form ng-submit="getBrokenProbes()">
<table class="table table-striped">
<tr>
<th>Bmonitor</th>
<th>Select Bmonitor</th>
</tr>
<tr ng-repeat="bmonitor in bmonitors">
<td>
<span>{{bmonitor.domainName}}</span>
</td>
<td>
<button class="btn btn-primary" ng-click="getBrokenProbes(bmonitor)">Request</button>
</td>
</tr>
</table>
</form>
Controller:
app.controller('logmeinValidationCtrl', ['$scope','$http', '$location', function($scope,$http, $location){
$scope.bmonitors = {};
$scope.brokenProbes = {};
$http.get('http://localhost/getBmonitors').success(function (data) {
$scope.bmonitors = data;
console.log($scope.bmonitors);
});
$scope.getBrokenProbes = function(bmonitor) {
let url = 'http://localhost/getBrokenProbes';
$http.post(url, bmonitor).then(function (response) {
$scope.brokenProbes = response.data.hosts;
console.log($scope.brokenProbes);
$scope.showBrokenProbes();
})
};
$scope.showBrokenProbes = function () {
$location.path('/logmeinValidationResult')
}
}]);
I'm trying to show that data in a different view but $scope.brokenProbes is not available in logmeinValidationResult.html (the page where I land after $location.path) so it just shows an empty table.
logmeinValidationResult.html
<table class="table table-striped">
<tr>
<th>Probe name</th>
</tr>
<tr ng-repeat="probe in brokenProbes">
<td>
<span>{{probe.description}}</span>
</td>
</tr>
</table>
New page controller:
app.controller('logmeinValidationResultCtrl', ['$scope', function($scope){
console.log($scope.brokenProbes); //This yields undefined
}]);
I) The variable $scope.brokenProbes belongs to the controller logmeinValidationCtrl where is defined...
In order to use it inside another controller, you should pass it - broadcast.
OR
II) Another (Better) solution is when the user gets redirected to logmeinValidationResult, you can call the API, get the data and assign to $scope.brokenProbes variable.
In that case,
your old controller should look like this:
app.controller('logmeinValidationCtrl', ['$scope','$http', '$location', function($scope,$http, $location){
$scope.bmonitors = {};
$http.get('http://localhost/getBmonitors').success(function (data) {
$scope.bmonitors = data;
console.log($scope.bmonitors);
});
$scope.getBrokenProbes = function(bmonitor) {
$location.path('/logmeinValidationResult/' + bmonitor); // Pass bmonitor to the result here so you can call the api with that parameter later on
};
}]);
And your here is how your new page controller should look like:
app.controller('logmeinValidationResultCtrl', ['$scope','$http', '$routeParams', function($scope,$http, $routeParams){
$scope.brokenProbes = [];
let url = 'http://localhost/getBrokenProbes';
let bmonitor = $routeParams.bmonitor; // Get passed bmonitor value from the route params
$http.post(url, bmonitor).then(function (response) {
$scope.brokenProbes = response.data.hosts;
console.log($scope.brokenProbes);
})
}]);
And don't forget to register route param bmonitor to your $routeProvider or whatever you use...
I have been searching for answers for several hours and I think I need to add a separate question. I have the following table and controller:
<table class="table table-striped">
<thead>
<tr>
<th>value</th>
<th>datapoint</th>
</tr>
</thead>
<tr ng-repeat="obj in cont.objs">
<td>{{ obj.value }}</td>
<td>{{ obj.datapoint }}</td>
</tr>
</table>
<button>Next</button>
objects.controller.js
(function() {
'use strict';
angular
.module('app.objects')
.controller('ObjectsController', ObjectsController );
ObjectsController.$inject = ['objectsService', '$state', '$stateParams', '$uibModal', 'logger'];
function ObjectsController(objectsService, $state, $stateParams, $uibModal, logger) {
var cont = this;
activate().then( function successCallback(selectObjects) {
cont.objects = loadObjects(selectObjects._links.objects.href);
});
}
function loadObjects(uri) {
...
cont.objects = getObjects(uri)
return cont.objects;
}
...
I have a button 'Next' and when pressed, needs to update cont.objects by fetching new cont.objects from the api by calling loadObjects with the original uri + '/2'.
I thought maybe
<button ng-click="cont.loadObjects(cont.objects.next.href)">Next</button>
would work, but I get an error saying loadObjects is undefined. Any ideas?
Hope you had defined activate() function and to make this work use
controller As with the controller definition and make sure you are clicking the button after the success of activate() function .
https://toddmotto.com/digging-into-angulars-controller-as-syntax/
You're not binding that function to scope. You need to add that function inside of your controller and bind it.
function ObjectsController(objectsService, $state, $stateParams, $uibModal, logger) {
var cont = this;
cont.loadObjects = loadObjects;
function loadObjects(uri) {
cont.objects = getObjects(uri)
return cont.objects;
}
activate().then(function successCallback(selectObjects) {
cont.objects = loadObjects(selectObjects._links.objects.href);
});
}
I am beginning to learn Angular, and I am having this issue. I am getting data from a web service using REST, then passing this data to the controller as data.d.results, I check in developer tools and results.length is 11, all is fine. I modified my html to include ng-app,ng-controller. My HTML for the Controller wrapper looks like this:
<table ng-controller="ListsController as vm">
<thead>
<tr>
<td>Image</td>
<td>Product</td>
<td>Code</td>
<td>Available</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in vm.products">
<td>
<img ng-src="{{product.ImageUrl.Url}}" title="{{product.Title}}" style="width: 50px;margin:2px;" />
</td>
<td>{{product.Title}}</td>
<td>{{product.ProductCode}}</td>
<td>{{product.ReleaseDate}}</td>
<td>{{product.Price | currency}}</td>
</tr>
</tbody>
</table>
and My controllerJS file looks like this:
(function () {
angular
.module("sitemanagerapp")
.controller("ListsController",
ListsController);
function ListsController() {
var vm = this;
var getProducts = getAllItems('Products');
getProducts
.done(function (data, status, jqXHR) {
vm.products = data.d.results;
})
.fail(function (jqXHR, status, error) {
LogError(error);
});
}
}());
I am checking in developer tools, and at the end, vm.products is populated with the data from the service. But why my table isn't filled with the data? How can I troubleshoot problems related to it? No errors are shown for me or anything.
I suppose your getProducts is not implemented with angular's $http or $resource.
In such case, to achieve your goal, you have to inject $scope into your controller even though you are using controllerAs syntax.
(function () {
angular
.module("sitemanagerapp")
.controller("ListsController",
['$scope', ListsController]);
function ListsController($scope) {
var vm = this;
var getProducts = getAllItems('Products');
getProducts
.done(function (data, status, jqXHR) {
vm.products = data.d.results;
$scope.$apply();
})
.fail(function (jqXHR, status, error) {
LogError(error);
});
}
})();
hi i am creating a application with Angularjs,REST service with spring. i want to pass the object from angulajs url to rest service , but it does work, please any one help me, my jsp page code is like below,
<html ng-app="studentApp">
<body>
<div ng-controller="studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td>
<input type = "text" ng-model = "student.lastName">
</td>
</tr>
</table>
</div>
</body>
</html>
and my angularjs code is,
var studentApp = angular.module("studentApp", []);
studentApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
studentApp.controller("studentController", [ '$scope', '$http',
function($scope, $http) {
$scope.toggle=true;
var urlBase="http://localhost:8080/studentweb/";
$scope.insertStudent = function inserStudent() {
$http({
method : 'POST',
url : urlBase+'/Student/insert',
data: {student:data}
}).success(function(data, status, headers, config) {
$scope.student=data;
$scope.toggle='!toggle';
}).error(function(data, status, headers, config) {
alert( "failure1");
});
and my rest service is,
public class StudentController
{
#RequestMapping(value="/Student/insert",method = RequestMethod.POST ,params= {"student"})
public String insertStudent(#RequestParam("student") StudentVO student) throws ParseException {
student.setFirstName(student.getFristName());
student.setLastName(student.getLstName());
studentcontrol.addStudent(student);
return "";
}
}
} ])
The problem is that you "usrlBase" variable has "student/" extra as you are already calling your Student controller in
url : urlBase+'/Student/insert'
Hence the complete URL becomes something like
http://localhost:8080/student//Student/insert whereas it should be something like:
http://localhost:8080/Student/insertStudent
Update:
Below is an absolutely fine working example with a sample restful service you had some brackets missing in your code. Please go through the below code and get back to me if required.
<html ng-app="studentApp">
<div ng-controller="studentController">
<table border="0">
<tr>
<td>Enter first name:</td>
<td><input type="text" ng-model="student.FirstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td>
<input type="text" ng-model="student.LastName">
</td>
</tr>
</table>
</div>
Script:
var studentApp = angular.module("studentApp", []);
studentApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
studentApp.controller("studentController", ['$scope', '$http',
function ($scope, $http) {
$scope.toggle = true;
//var urlBase = "http://localhost:8080/student/";
// $scope.insertStudent = function () {
debugger;
$http({
method: 'GET',
url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Employees(1)?$format=json',
// data: { student: data }
}).success(function (data, status, headers, config) {
debugger;
$scope.student = data;
$scope.toggle = '!toggle';
}).error(function (data, status, headers, config) {
debugger;
alert("failure1");
});
// }
}]);
I tried to get the value from a table to my input text,this is my try:
this is the first page that contains the list of clients:
clients.html
<div id="ng-app" ng-controller="PostController">
<table class="table table-striped table-bordered" style="text-align:center" id="table" > <!--onClick="select()"-->
<thead>
<th align="center">Référence</th><th align="center">Nom</th><th align="center">Prenom</th><th align="center">Email</th><th align="center">Adresse Facturation</th><th align="center" colspan="2">Actions</th>
</thead>
<tbody>
<tr ng-repeat="post in posts | filter:posts.nom" >
<td align="center">{{post.id}}</td>
<td align="center">{{post.nom}}</td>
<td align="center">{{post.prenom}}</td>
<td align="center">{{post.email}}</td>
<td align="center">{{post.adresse}}</td>
<td align="center"><a ui-sref="app.modifier({customerID:post.id})">Modify</a></td>
</tr>
</tbody>
</table>
</div>
this is the "PostController" in which I get the list of clients:
.controller('PostsCtrlAjax', ['$scope','$rootScope', '$http' , '$window' ,function($scope,$rootScope,$http,$window) {
$scope.errors = [];
$scope.msgs = [];
$rootScope.usersData ;
$http({method: 'GET', url: 'http://localhost/onlinefacturation/web/app.php/apiclient/clients.json'})
.success(function(data){
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$scope.posts = data; // response data
$rootScope.usersData = angular.toJson($scope.posts);
console.dir($rootScope.usersData);
}).error(function(data, status, headers, config) {
console.log("data error ...");
});}])
When I clic on "Modify" link I am redirected to modify.html which contains the table's data values in input text:
<tabset class="tab-container">
<tab ng-controller="editController" >
<div class="row">
<div class="form-group">
<label class="col-sm-1 control-label">Nom:</label>
<div class="col-sm-1">
<input type="text" class="form-control rounded" ng-model="usernom" id="nom" value="">
</div>
</div></div> </tab></tabset>
the "editController" is responsible for sending the modified data(in case I modify) from the text inputs to the database with rest web services:
.controller('editController', ['$scope','$rootScope', '$http',function($scope,$rootScope,$http) {{
$scope.errors = [];
$scope.msgs = [];
$scope.usershow = function() {
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$scope.path = window.location.href;
$scope.userid = $scope.path.split("/").pop();
$http({method: 'GET', url: 'http://localhost/onlinefacturation/web/app_dev.php/apiclient/modifier?id='+$scope.userid+'&nom='+$scope.usernom}).success(function(data, status, headers, config){
if (data.msg != '')
{
$scope.msgs.push(data.msg);
}
else
{
$scope.errors.push(data.error);
}
}).error(function(data, status) { // called asynchronously if an error occurs
$scope.errors.push(status);
});}}])
the routing file:
.state('app.modifier', {
url: '/client/modifier/:customerID',
templateUrl: 'tpl/modify.html',
controller: 'editController'
})
the problem is that when I clic on button Modify,I didn't get values in the input text (in the modify.html page),How can I send the data from a table or that I get from a web service to an input text in another web page??thanks for help
You share data between controller via angular service instance
First, Create a angular service to retrieve and hold common table data
angular.module('app').service('TableService', function() {
var tableData = {};
this.getTableData = function() {
// use $http.get to get data from server
// save data in service local var
}
this.getTableRow = function(id) {
// return record from tableData that matches this ID
}
}
Second, inject this service in your controllers to access the data
angular.module('app').controller('editController', function(TableSerivce, $routeParams) {
var editingTableRow = TableService.getTableRow($routeParams.customerId);
// get the data that you need to update and put into the input text elements or components in your modify html via scope vars here
}
PS: This is a psuedo code to give you a brief idea of it. Watch this Egghead video for more details