I want to show data in a table with angular js. I have tried many code but didn't solve my problem. Please help
Here is my code of View page..
Script code
<script>
var app = angular.module('myApp', []);
app.controller("customersCtrl", function($scope, $http) {
$http.get('<?php echo base_url('items/getRecords'); ?>').
success(function(data, status, headers, config) {
$scope.users = data;
});
});
</script>
HTML Code
<div ng-app="myApp" ng-controller="customersCtrl">
<table class="datatable table table-striped table-bordered" id="example">
<thead>
<tr>
<th>Product Code</th>
<th>Product Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA" ng-repeat="x in users">
<td style="text-align:center;">{{x.item_code}}</td>
<td style="text-align:center;">{{x.item_name}}</td>
</tr>
</tbody>
</table>
</div>
On Controller
public function getRecords(){
$this->load->model('item_model');
$data=$this->item_model->getTransactionData();
$this->output->set_header('Content-type: application/json');
$this->output->set_output(json_encode($data));
}
And finally on Model
public function getTransactionData(){
$query=$this->db->get('ac_itrans');
return $query->result();
}
Here is Json format of my result:
[{"itrans_id":"17","cocode":"OFLT","yearcode":"OFLT16","vseries":"S","vnum":"1","vdate":"2015-10-06","linenum":"1","item_type":"services","item_code":"26","item_name":"AC Repair"}];
Console log
please read tutorial from here, there is good way to do integrate angularjs with codeigniter php framework.
Apparently, code is correct.
you need to debug to check whether you are getting right JSON format. check this using console.log($scope.user)..instead of data.length.
use devtool to see what it returns. Put that snapshot here.
and don't you need to initialize the user !
$scope.user = [];
Related
So I have been able to confirm that data is getting into my angular function, but have been banging my head against the wall trying to get it to the DOM. I am doing everything as simple as I can before I start creating my full crud.
I'm sure I am missing something simple, as I am a newb with Angular and most certainly utilizing $http through asp.net api.
(function () {
angular
.module('appmodule')
.controller('campaignservice', ['$scope', '$http', campaignservice])
function campaignservice($scope, $http) {
$http.get("http://localhost:58291/api/campaigns").then(function (data) {
$scope.campaigns = data;
});
};
})();
and then the html
<div>
<div ng-controller="campaignservice">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Pages </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="campaign in campaigns">
<td>{{campaign.Id}}</td>
<td>{{campaign.Name}}</td>
<td>{{campaign.Pages}}</td>
</tr>
</tbody>
</table>
</div>
Whats my deal?? My brain is bleeding.
From help in the comments I merely needed to make the following amendment.
$scope.campaigns = data.data;
I want to show specific elements from objects I receive from a service using ng-repeat. When I use {{account}} it renders all the elements, but when I try for example {{account.idType}} it shows nothing. What's going on?
Here is my HTML
<table>
<thead>
<tr>
<th>List of Accounts</th>
</tr>
</thead>
<tbody ng-repeat="account in accounts" ng-if="account.idType != 0">
<tr>
<td>{{account.idType}}</td>
<td>{{account.linkRel}}</td>
<td>{{account.linkURI}}</td>
<td><input type="button" ng-click="editAccount(account.idType)" value="edit"></td>
</div>
and this is the controller:
rest.controller('accountListCtrl',['$scope','$resource','$location','$parse','$routeParams',
function($scope,$resource, $location, $parse,$routeParams)
{
var Account = $resource('http://localhost\\:8085/WSAT/account/');
$scope.accounts = Account.get();
}]);
the response I get from the service is this:
{"linklist":[{"idType":"0","linkRel":"Get all accounts","linkType":"Sibling","linkURI":"http://localhost:8085/WSAT/account","linkVerb":"GET"},{"idType":"0","linkRel":"Create a new account","linkType":"Sibling","linkURI":"http://localhost:8085/WSAT/account","linkVerb":"POST"},{"idType":"7","linkRel":"try","linkType":"Child","linkURI":"http://localhost:8085/WSAT/account/7","linkVerb":"GET"},{"idType":"9","linkRel":"try234","linkType":"Child","linkURI":"http://localhost:8085/WSAT/account/9","linkVerb":"GET"}]}
Because $resource is asynchronous (It returns a promise).
Replace $scope.accounts = Account.get() by
Account.get().then(function(data){
$scope.accounts=data.result;
});
I am implementing angular datatable in my angularjs based application, i am doing rest service call and getting list of objects as a response to angularjs controller like
roomCategories.fetch({}, function(list){
$scope.categories = list.list;
});
In this scope i'll get the list of object, i need to set the scope var in angular datatable. But when i try to implement as
$scope.dtOptions = DTOptionsBuilder.fromFnPromise($scope.categories)
.withPaginationType('full_numbers');
$scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0).withTitle('Name'),
DTColumnDefBuilder.newColumnDef(1).withTitle('Description')
];
I have seen the example like json or array implementation is explained, but i need to add or set the scope var i.e., list in the datatable.
in my html code
<table datatable dt-options="dtOptions" dt-column-defs="dtColumnDefs"></table>
But data is not reflected in page, can anyone help me to solve this issue.
i think you can do something like this:
<div ng-controller="AngularWayCtrl as showCase">
<table datatable="ng" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in yourData">
<td>{{row.id}}</td>
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
</tr>
</tbody>
</table>
</div>
Hope it helps.
Ok. This one really has me stumped. Here is what I am trying to build.
I have a table. In the first <tr> I have it repeating data, and the last <td> has a button. When I click this button, I want to show a set of hidden rows underneath each repeated <td> tag. In those hidden rows, I want to call more data.
I'm using mysqli and php to encode the data on the DB into json, which I then populate into the cells. I can do all of this with 1 controller. However, if I want to pull data from another source, to populate into the hidden cells, I have to make another controller.
Here is the base code: (pardon the inline css, its easier for me to format it into external css after its functional)
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('testApp', []);
app.controller('tableCtrl_1', function($scope, $http){
getdata();
function getdata(){
$http.post("angular_data.php").success(function(data){
$scope.getdata = data;
});
};
});
app.controller('tableCtrl_2', function($scope, $http){
getdata();
function getdata(){
$http.post("angular_data_2.php").success(function(data){
$scope.getdata = data;
});
}
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" style="padding:0px;">
<table class="table table-bordered" ng-controller="tableCtrl_1">
<tr style="height:70px;background-color:#0C4791;">
<th style="text-align:center;color:white;vertical-align:middle;">Flexi Floor/Low Wall</th>
<th style="text-align:center;color:white;vertical-align:middle;">Cooling</th>
<th style="text-align:center;color:white;vertical-align:middle;">Heating</th>
<th style="text-align:center;color:white;vertical-align:middle;">Nominal Capacities(cooling/heating)</th>
<th style="text-align:center;color:white;vertical-align:middle;">Pipe Length</th>
<th style="text-align:center;color:white;vertical-align:middle;">List Price</th>
<th style="text-align:center;color:white;vertical-align:middle;">Quantity</th>
</tr>
<tr ng-repeat = "getdata in getdata | filter:'Flexi Floor/Low Wall':true">
<td style="vertical-align:middle;text-align:center;">{{getdata.model_no_from}} + {{getdata.model_no_to}}</td>
<td style="vertical-align:middle;text-align:center;">{{getdata.cooling}}</td>
<td style="vertical-align:middle;text-align:center;">{{getdata.heating}}</td>
<td style="vertical-align:middle;text-align:center;"><span style="color:blue">{{getdata.nominal_cooling}}</span><span style="color:red;">{{getdata.nominal_heating}}</span></td>
<td style="vertical-align:middle;text-align:center;">{{getdata.pipe_length}}</td>
<td style="vertical-align:middle;text-align:center;"><span style="font-weight:bold;">{{getdata.system_listPrice | currency: "£"}}</span></td>
<td style="vertical-align:middle;text-align:center;"><button class="btn btn-default btn-large btn-block">Select</button></td>
</tr>
</table>
<table class="table table-bordered" ng-controller="tableCtrl_2">
<tr ng-repeat ="getdata in getdata">
<td style="vertical-align:middle;text-align:center;" colspan="7">{{getdata.sales_description}}</td>
</tr>
</table>
</div>
</div>
</div>
</body>
The second table is just so that I could test and make sure it's pulling in data properly. (turns out it wasn't, as I had to encode in utf-8)
SO TLDR:
controller 1 pulls in main data, populates cells. Click the button in a cell, and it will show hidden cells underneath with controller 2 data.
Problems I am having: matching the secondary data to the ng-repeat of the primary data, using both data sources in one controller area.
image for visual aid:
Image link
This is my technique working with relational data from MySql. Using the angular build in filter to march the main view. In MS access it is a main form and subform. for me I use slim framework to build easy API Slim
Here is the $scope handle the related key.
$scope.showDetail = function(saleId,saleDetails){
$scope.dataDetails = $filter('filter')(saleDetails,{main_id:saleId},true);
}
look at the Plunker
Good luck!
Hi I am not able to render table using bootstrap-table and angular. here is my code, I think I need to call bootstrap-table init method in angular ajax call. Can some one guide me on how to do this..?
angular
.module('reports')
.controller(
'ReportCtrl',
[
'$scope',
'$http',
'ngProgress',
function($scope, $http, ngProgress) {
var vm = this;
vm.mdp = {};
vm.mdp.data = [];
vm.mdp.columns = [];
$scope.submit = function() {
var report = $scope.tab;
$http.post('/reports/cmd/getData', {
report : report,
date : createdAfter
}).success(function(data) {
vm.mdp.data = data;
$.each(data[0], function(key, value){
vm.mdp.columns.push(key);
});
}).error(function(error) {
alert(error);
});
};
} ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mdp" class="panel" ng-controller="ReportCtrl as report" ng-show="panel.isSelected('mdp')">
<table data-toggle="table" data-show-columns="true" data-search="true" data-show-export="true" data-pagination="true" data-height="299">
<thead>
<tr>
<th ng-repeat="c in report.mdp.columns" data-field= {{c}} >{{ c }}</th>
</tr>
</thead>
<tr ng-repeat="r in report.mdp.data">
<td ng-repeat="c in report.mdp.columns">{{ r[c] }}</td>
</tr>
</table>
</div>
Integrating Bootstrap Table with Angular is solved here:
https://github.com/wenzhixin/bootstrap-table/issues/165
https://github.com/AkramKamal/bootstrap-table-examples/tree/master/integrate
I have some minor changes in my implementation of this solution which I will upload to Github / JSFiddle shortly. But the links above will allow you to get going.