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!
Related
Hi Sir,
I would know how i can refresh my List after add , edit or delete operation with AngularJS .
i Post my Controller And my HTML code , it work but i must refresh all page for see the changes in DB. Ty for all request.
CONTROLLER:
angular.module('myApp').controller('controllerFilm', function(service , $scope ) {
var vm = this;
vm.allFilm = function() {
service.allFilm().then(
function(data){//success
vm.allFilm = data; // accounts list
},function(err){//error
console.log("errore di chiamata allFilm");
});
}
HTML:
<div ng-controller="controllerFilm as cf">
<button class="button" ng-click="cf.allFilm()">FILM MANAGER</button>
<br>
<br>
<div class="scroll">
<table class="blueTable">
<thead>
<tr>
<th>ID</th>
<th>TITLE</th>
<th>RELASE YEAR</th>
<th>LENGTH</th>
<th>EDIT</th>
<th>DELETE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat =
"film in cf.allFilm | orderBy : '-filmId' | limitTo : 10">
<th>{{film.filmId}}</th>
<th>{{film.title}}</th>
<th>{{film.relaseYear}}</th>
<th>{{film.length}}</th>
<th align="center"> <button
ng-click="cf.editFilm(film)">EDIT</button></th>
<th align="center"> <button
ng-click="cf.deleteFilm(film)">DELETE</button></th>
</tr>
</tbody>
</table>
PS : i don't post my function edit and delete..
Although changes should automatically be applied as AngularJs has two way binding but sometimes, it does cause this issue. try calling below scope method after setting data to the list.
$scope.$apply();
P.S: This is a way of forcefully executing digest cycle to reflect changes right away.
I am beginning level in angularJS. Now i am trying to populate a table records into my input fields when table row click event(). How to make this any suggestions please.
Thanks in advance.:-)
Note: I didn't using any json data for showing records into table.
Try using events. Here is a simple demo of how you can select a clicked element from a table:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.select = function(e) {
$scope.selected = e.toElement.innerText;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<table ng-click="select($event)">
<tr>
<td>aaa1</td>
<td>bbb1</td>
</tr>
<tr>
<td>AAA2</td>
<td>BBB2</td>
</tr>
</table>
Selected <input ng-model="selected" />
</div>
you may use follow the workflow
<table>
<tr ng-repeat="item in recordsArr track by $index">
<td ng-click="doCallFunction( $index)"> {{item.id}}</td> <td> {{item.name}}</td>
</tr>
</table>
// just think of your records
post if any other info required
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 = [];
Part of a project I am working on is listing members, members companies, etc... I used $http within my controller to connect to a JSON file to get everything wired up and test functionality. I am using ng-repeat to populate the page and ng-scope to allow visitors to search the listings.
Everything worked as expected until I wired up Firebase to hold the data. Again, the data populates the page, but now my ng-model is broke and there's no way to search the listings. My Angular skills are still being polished, to say the least, so I'm sure I am having a noob moment. Any chance someone could take a look, I 'de be very grateful. Here is my code.
My Controller
.controller( 'AlliedCtrl', function AlliedCtrl( $scope, $firebase) {
var ref = new Firebase("https://mybase.firebaseio.com/members");
var sync = $firebase(ref);
var syncObject = sync.$asObject();
syncObject.$bindTo($scope, "members");
});
My HTML
<div class="search-sort">
<div class="row">
<div class="col-sm-12 col-xs-12">
<input ng-model="query" placeholder="Search and Sort by Keyword e.g. Accounting, Law, Mobile etc..." class="small">
</div>
</div>
</div>
<table class="table table-condensed table-responsive">
<thead>
<tr>
<th></th>
<th>Member Company</th>
<th>Company Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="m in members | filter:query">
<td style="width:250px"></td>
<td style="width:250px"><b>{{ m.company }}</b><br>{{ m.address }}<br>{{ m.address2 }}<br>{{ m.url }}<br><br>{{ m.name }}<br><em>{{ m.title }}</em><br>{{ m.phone }}<br><a mailto="{{ m.email }}">{{ m.email }}</a><br><br></td>
<td>{{ m.description }}</td>
</tr>
</tbody>
</table>
If you want to use ng-repeat on a collection from Firebase, you have to call $asArray and not $asObject + $bindTo.
So in your controller:
var ref = new Firebase("https://mybase.firebaseio.com/members");
var sync = $firebase(ref);
var syncObject = sync.$asArray();
$scope.members = syncObject;
If I understand your problem correctly, you need to wait until the syncObject has loaded so...
//Controller
var members = syncObject.$loaded().then(function() {
members.$bindTo($scope, "members");
}
In my angular app I have the typical table iterator via ng-repeat.
<table class="table table-bordered table-condensed table-striped">
<tbody>
<tr ng-repeat="assay in assays">
<td>
<td key="id">{{assay.id}}</td>
<td key="source">{{assay.source}}</td>
<td key="status">{{assay.status}}</td>
... etc ...
</tr>
</tbody>
</table>
Using a button a user makes a change in a modal dialog. This is all working fine, but I want to update a single cell in the table with the result; I have the id of the row as well as the field name.
Is it possible in Angular to access a single cell, or even update the entire row, if you have the index? At present I am achieving this by refreshing all the table data from the remote server... not ideal.
I guess I am looking for something like:
assays[id].status = 'great!'
Thanks to #JB Nizet 's comment above I was able to achieve what I wanted, I think in a more angular way than I had been headed in. The angular data binding is really a great way to handle model/view updates.
I have posted a simplified version of the code here in case it helps someone else. I am using AngularUI for the modals.
view
<table class="table table-bordered table-condensed table-striped">
<tbody>
<tr ng-repeat="assay in assays">
<td>
<td key="id">{{assay.id}}</td>
<td key="source">{{assay.source}}</td>
<td key="status">{{assay.status}}</td>
... etc ...
<button class="btn btn-xs btn-info" ng-click="invokeAssayModal(assay)">Assay</button>
</tr>
</tbody>
</table>
controller
$scope.invokeAssayModal = (assay) ->
$scope.assay = assay
modalInstance = $modal.open(
templateUrl: '/templates/panel/assay_modal.html'
controller: 'AssayModalCtrl'
windowClass: 'configure-dialog'
resolve:
assay: ->
$scope.assay
)
modalInstance.result.then ((assay) ->
$scope.assay = assay
return
), ->
return
modal view
<button type="button" class="btn btn-mini btn-success" ng-click="select(primerPair)">Select</button>
modal controller
$scope.select = (primerPair) ->
$scope.assay.source = primerPair.source