I'm trying to display data from one page to another in Angular JS. Using displayResponse in Firefoxes Console, the Response data seems to be retrieved however I'm having trouble trying to display the values on the page which is troublesome since a Team member was able to get them to display properly on other pages on the site.
Here is the Code so far (I have removed chucks of the script to save screen space. These bits of code are not relevant to the issue afaik):
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/ViewSalesRecords', {
templateUrl: 'view-sales-records.html',
controller: 'salesRecordController'
}).
when('/ViewSingleSale', {
templateUrl: 'view-single-sale.html',
controller: 'salesRecordController'
});
});
app.controller('salesRecordController', ['$scope', '$http', function($scope, $http) {
$scope.displaySingleSale = function(sale_id) {
$http.post('read_sale.php', {
'sale_id': sale_id
})
.then(function(response) {
$scope.singleSalesRecord = response.data;
console.log($scope.singleSalesRecord);
})
}
$http.get("read_sale.php")
.then(
function(response) {
$scope.salesRecords = response.data;
}
)
}]);
<head>
<link href="./styles/style.css" rel="stylesheet">
</head>
<table class="table table-hover" data-ng-model="sale_id">
<p><strong>Sale ID: {{displayResponse}} </strong> </p>
<p><strong>Sale Date: </strong> </p>
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Item Total</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="s in singleSalesRecord">
<td>{{s.product_id}}</td>
<td>{{s.product_name}}</td>
<td>{{s.quantity}}</td>
<td>${{s.product_price}}</td>
</tr>
</tbody>
</table>
<p><strong>Total: ${{s.orderTotal}}</strong></p>
The page that is sending the data
<head>
<link href="./styles/style.css" rel="stylesheet">
</head>
<div>
<input class="form-control searchBar" data-ng-model="searchText.sale_id" type="text" placeholder="Search sales by Sale ID">
<table class="table table-hover">
<thead>
<tr>
<th>Sale ID</th>
<th>Total items</th>
<th>Total price</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="s in salesRecords | filter:searchText:strict">
<td>{{s.sale_id}}</td>
<td>{{s.TotalItems}}</td>
<td>${{s.orderTotal}}</td>
<td>
<button class="btn btn-primary">View</button>
<button class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
So wall of text taken into consideration, what am I doing wrong? I will admit I'm not too familiar with AngularJS so this might be a very amateur mistake on my part.
I figured out that the problem was that the values that I wanted to transfer were been wiped when I moved to another page. So I decided to simply display them on the first page instead hyperlinking to another.
Related
Im trying to display large data set using smart-table. Im contacting server with $http request and when I assign response data to $scope.rowCollection, application stuck for nearly 40 second until all data is displayed on page. In response json i got nearly 18000 results to display. I dont know if I do something wrong. I get response from server in 600 ms but after assign application stuck. It looks like smart-table is trying to make a copy of response in displayedCollection array and this operation take long time but its only my opinion. Please help. Thanks in advance.
HTML
<table st-table="displayedCollection" st-safe-src="rowCollection" class="table">
<thead>
<tr>
<th colspan="8"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th>
</tr>
<tr>
<th st-sort="TestEndDate">Test Date</th>
<th st-sort="Workplace">Workplace</th>
<th st-sort="Tester">Worker</th>
<th st-sort="SerialNo">Serial Number</th>
<th st-sort="TestProgram">Testing program</th>
<th st-sort="TestResult">Test Result</th>
<th>Download</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in displayedCollection">
<td>{{row.TestEndDate | date}}</td>
<td>{{row.Workplace}}</td>
<td>{{row.Tester}}</td>
<td>{{row.SerialNo}}</td>
<td>{{row.TestProgram}}</td>
<td>{{row.TestResult}}</td>
<td>
<button type="button" ng-click="downloadItem(row)" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-download">
</i>
</button>
</td>
<td>
<button type="button" ng-click="detailItem(row)" class="btn btn-sm btn-primary">
<i class="glyphicon glyphicon-eye-open">
</i>
</button>
</td>
</tr>
</tbody>
</table>
Javascript
app.controller('AppController', ['$scope', '$http', '$modal', function ($scope, $http, $modal) {
var search = this;
search.serials = [];
$scope.rowCollection = [];
$scope.init = function () {
waitingDialog.show();//show loading
getTestResults();
};
var getTestResults = function () {
$http({
method: 'GET',
url: "http://sqldev/api/testresults"
}).then(function successCallback(response) {
$scope.rowCollection = response.data;//after assign response.data into rowCollection application stuck
waitingDialog.hide();//hide loading
}, function errorCallback(response) {
console.log('Error: ' + response);
waitingDialog.hide();//hide loading
$scope.open()//open modal with error message
});
};
}]);
I'm just trying to fetch contents from server and display it in a table using Angularjs. I'm been trying this from a while, but did not got any solution yet. Btw, I'm working on CodeIgniter framework.
Here is my CodeIgniter controller;
public function list_agents() {
if($this->is_logged_in ()) {
$agents = $this->generic_model->general_fetch('agent_master');
echo json_encode($agents);
}
else {
redirect(base_url());
}
}
In the above code, instead of echo I used print, print_r also.. But still its not working.
Here is my js file function;
(function () {
var addApp = angular.module('agentApp', ['ngRoute']);
addApp.controller('agentAddController', function ($scope, $http, growl) {
$scope.receivedData = [];
$http({
method : 'POST',
url : 'agent/list_agents',
headers : {
"Content-Type" : "application/json"
}
}).then(function (data) {
$scope.receivedData = JSON.parse(data);
});
});
})();
And in this above code I used with and without JSON.parse function. Didn't got the correct result.
Here is my view;
<section class="content" ng-app="agentApp" ng-controller="agentAddController">
<div class="row">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Manage Agents</h3>
</div>
<div class="box-body">
<table class="table table-striped table-bordered" id="agents_table">
<thead>
<tr>
<th>Sl No.</th>
<th>Agent Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<div ng-repeat="data in receivedData">
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ data.agent_name }}</td>
<td><button class="btn btn-warning btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></button></td>
</tr>
</div>
</tbody>
<tfoot>
<tr>
<th>Sl No.</th>
<th>Agent Name</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</section>
I know if I put ng-repeat inside tr tag I'll get the perfect result, but I don't want to do that because, I'm working with adminLTE. So there is a function DataTable() in adminLTE where it'll apply search and pagination to the table. If I give ng-repeat to tr, these functionalities can not be added.
Try: $scope.receivedData = JSON.parse(data.data);
The response object is not only the data itself, that's why the 5 rows. It gives back, data, headers, status, etc...
https://docs.angularjs.org/api/ng/service/$http
I have below table,
<div class="md-dialog-main">
<table class="me-hours-table">
<thead>
<th>Product Type</th>
<th>Product Name</th>
<th>
<select>
<option style="background-color:'#FF0000'">weight</option>
<option style="background-color:'#FF0000'">size</option>
</select>
</th>
<th>Price</th>
<th>Qty</th>
</thead>
<tbody>
<tr ng-repeat="data in variants">
<td>{{data.type}}</td>
<td>{{data.name}}</td>
<td>{{data.size}}</td>
<td>{{data.price}}</td>
<td>{{data.qty}}</td>
</tr>
</tbody>
</table>
</div>
The controlling part which take the data is as below,
$scope.idDetails = function(product){
var ids={
mainId : product.mainId,
childId : product.childId
};
console.log(ids.childId);
commerceService.getVariants(ids.childId).
success(function(data) {
toastr.success('Successfully saved', 'Awsome!', {
closeButton: true
});
$scope.variants=[{
type: "cloth",
name: data[0].name,
size: "10",
price: data[0].price,
qty: "1"
}];
console.log($scope.variants.name);
}).error(function(err) {
toastr.error('Saving detals was not Successful', 'Warning', {
closeButton: true
});
});
}
Everything works fine, but I want to use a Angular Js inline editor to edit the rows in the table. First the user can see the data which I get from the controller, then the user should be able to edit the rows. I have searched through the internet but I found inline editing tables which use button to edit and save. I don't want any buttons in my table rows. I want to bind data with the model. So that at the end I can take the data from the table via the model. Please help
After searching in many areas I found an inline edit that do not need any button to edit. The code is as below,
<div class="md-dialog-main">
<table class="me-hours-table">
<thead>
<th>Product Type</th>
<th>Product Name</th>
<th>
<select ng-model="selection">
<option value="weight">weight</option>
<option value="size">size</option>
</select>
</th>
<th>Price</th>
<th>Qty</th>
</thead>
<tbody>
<tr ng-repeat="data in variants">
<td
inline-edit="data.sku"
inline-edit-callback="skuUpdateHandler(newValue)"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
<td
ng-model="data.name">{{data.name}}</td>
<td
inline-edit="data.sizeOrweight"
inline-edit-callback="sizeUpdateHandler(newValue)"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
<td
inline-edit="data.price"
inline-edit-callback="priceUpdateHandler(newValue)"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
<td
inline-edit="data.qty"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
</tr>
<td
inline-edit-callback="qtyUpdateHandler(newValue)"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
</tr>
</tbody>
</table>
</div>
The controller is as below,
$scope.skuUpdateHandler = function(newValue) {
console.log(newValue);
};
$scope.sizeUpdateHandler = function(newValue) {
console.log(newValue);
};
$scope.priceUpdateHandler = function(newValue) {
console.log(newValue);
};
Please install ng-inline-edit to use this method. Click
https://github.com/tameraydin/ng-inline-edit to install ng-inline-edit
I'm new to Angularjs. I am learning about factory.
In my example, I have 2 requests to Restful Api and got 2 responses in JSON format.
With the first json, I can use ng-repeat to show them but the 2nd json can't bind to the view.
How can I bind both responses into the same view?
this is my code
index.html file
<!DOCTYPE html>
<html lang="en" ng-app='f1feed'>
<head>
<title>AngularJS Routing example</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 10px;
background-color: #F5F5F5;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="DriverController">
<table>
<thead>
<tr>
<th colspan="4">Drivers Champion Standings</th>
</tr>
<tr>
<th>No.</th>
<th>Full name</th>
<th>Driver ID</th>
<th>Points</th>
</tr>
</thead>
<tbody ng-repeat="driver in drivers">
<tr>
<td>{{$index + 1}} </td>
<td>{{driver.Driver.givenName}} {{driver.Driver.familyName}}</td>
<td>{{driver.Driver.driverId}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
<div class="info">
<h1>1st Driver Detail info</h1>
<ul>
<li>Driver ID: {{alonso.driverId}} </li>
<li>Date of Birth: {{alonso.dateOfBirth}} </li>
<li>Nationality: {{alonso.nationality}}</li>
</ul>
</div>
</body>
</html>
file app.js
var app = angular.module('f1feed',[]);
app.factory('DriverSev', function($http){
var driverApi = {};
driverApi.getDriverStands = function(){
return $http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/current/driverStandings.json?callback=JSON_CALLBACK'
});
};
driverApi.getDetail = function(){
return $http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/drivers/alonso.json?callback=JSON_CALLBACK'
});
};
return driverApi;
});
app.controller('DriverController', function DriverController($scope, DriverSev){
$scope.drivers = [];
$scope.alonso = [];
DriverSev.getDriverStands().success(function(data){
$scope.drivers = data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
})
DriverSev.getDetail().success(function(data){
$scope.alonso = data.MRData.DriverTable.Drivers;
console.log($scope.alonso);
})
});
Thanks
your $scope.alonso is unused in your view put it in another ng-repeat to display it
<table>
<thead>
<tr>
<th colspan="4">Drivers Champion Standings</th>
</tr>
<tr>
<th>No.</th>
<th>Name</th>
</tr>
</thead>
<tbody ng-repeat="alon in alonso">
<tr>
<td>{{$index + 1}} </td>
<td>{{alon}}</td>
</tr>
</tbody>
</table>
if it's the same data model, push it in $scope.drivers
$scope.alonso is an array.
<ANY ng-repeat="details in alonso">
<any>Driver ID: {{details.driverId}} </any>
<any>Date of Birth: {{details.dateOfBirth}} </any>
<any>Nationality: {{details.nationality}}</any>
</ANY>
should do the trick, or something ugly such as {{alonso[0].driverId}}
I am using angularjs 1.2.8 with grails 2.3.4 backend. I am providing a Restful Api over the grails Resources tag.
I have a view were I load the data:
<div class="container main-frame" ng-app="testapp"
ng-controller="searchController" ng-init="init()">
<h1 class="page-header">Products</h1>
<table class="table">
<thead>
<tr>
<th width="25px">ID</th>
<th>TITLE</th>
<th>PRICE</th>
<th>Description</th>
<th width="50px"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in product by $id">
<td>{{p.id}}</td>
<td>{{p.title}}</td>
<td>{{p.price}}</td>
<td>{{p.description}}</td>
<!-- ng-show="user.id &&user.id==e.user_id" -->
</tr>
</tbody>
</table>
<!-- ng-show="user.username" -->
<p>
</div>
I am using the searchController to load the data:
testapp.controller("searchController", function($scope, $rootScope, $http, $location) {
var load = function() {
console.log('call load()...');
var url = 'products.json';
if ($rootScope && $rootScope.appUrl) {
url = $rootScope.appUrl + '/' + url;
}
$http.get(url)
.success(function(data, status, headers, config) {
$scope.product = data;
angular.copy($scope.product, $scope.copy);
});
}
load();
});
However in my postgresql db there is data available, but I only get:
and no expection at all:
Any suggestions what I can do to check that?
PS.: Controller is loaded!
UPDATE
Using
<tr ng-repeat="p in product track by p.id">
I am getting an error:
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.8/ngRepeat/dupes?p0=p%20in%20product%20track%20by%20p.id&p1=undefined
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:6:449
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:184:445
at Object.fn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:99:371)
at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:100:299)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:103:100)
at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:67:98)
at E (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:71:85)
at XMLHttpRequest.v.onreadystatechange (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:72:133) angular.js:9413
UPDATE2
The json representation looks like that:
[{"class":"com.testapp.Product.BasicProduct","id":1,"dateCreated":"2014-02-17T13:43:13Z","description":"blblblblbalablablalbalbablablablablblabalalbllba","lastUpdated":"2014-02-17T13:43:13Z","price":5.0,"title":"Product1"},{"class":"com.testapp.Product.BasicProduct","id":2,"dateCreated":"2014-02-17T13:43:13Z","description":"blblblblbalablablalbalbablablablablblabalalbllba","lastUpdated":"2014-02-17T13:43:13Z","price":75.0,"title":"Product2"},{"class":"com.testapp.Product.BasicProduct","id":3,"dateCreated":"2014-02-17T13:43:13Z","description":"blblblblbalablablalbalbablablablablblabalalbllba","lastUpdated":"2014-02-17T13:43:13Z","price":50.0,"title":"Product3"},{"class":"com.testapp.Product.BasicProduct","id":4,"dateCreated":"2014-02-17T13:43:13Z","description":"blblblblbalablablalbalbablablablablblabalalbllba","lastUpdated":"2014-02-17T13:43:13Z","price":25.0,"title":"Product4"},{"class":"com.testapp.Product.BasicProduct","id":5,"dateCreated":"2014-02-17T13:43:13Z","description":"blblblblbalablablalbalbablablablablblabalalbllba","lastUpdated":"2014-02-17T13:43:13Z","price":15.0,"title":"Product5"}]
Fix the ngRepeat syntax:
<tr ng-repeat="p in product track by p.id">