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
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 showing list on table using html (table, tr, td) and angularJS. Table also contains filters on columns. Table is populating data properly and filters are working properly using AngularJS.
After doing some filtration, I want to get only visible rows in one of my angularJS's function.
How can I get only the Visible Rows of a Table in angularJS after Few Filters?
Please note that I am not using any checkboxes or radio buttons with data list.
Please see my code below:
var myapp=angular.module("myapp",[]);
myapp.controller('ctrcommodity',['$scope',function($scope) {
$scope.commodity={
allPreferredCommodity: [
{
"commodityId": "2016070011220000141",
"commodityName": "Computer (PC)"
},
{
"commodityId": "2016080011220000004",
"commodityName": "Laptop"
},
{
"commodityId": "2016070011220000032",
"commodityName": "Keyboard"
},
{
"commodityId": "2016080011220000054",
"commodityName": "Mouser"
}
]
};
$scope.getVisibleRows=function()
{
//want to get details of visible rows after filtration
}
}]);
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Commodity Id</th>
<th>Commodity Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="txtcid" id="txtcid" ng-model="s.commodityId"></td>
<td><input type="text" name="txtcname" id="txtcname" ng-model="s.commodityName"></td>
</tr>
<tr ng-repeat="commoditylist in commodity.allPreferredCommodity | filter:s">
<td>{{commoditylist.commodityId}}</td>
<td>{{commoditylist.commodityName}}</td>
</tr>
<tr>
<td align="center" colspan="6" height="50">
<input type="button" value="Show Visible Rows" ng-click="getVisibleRows()">
</td>
</tr>
</tbody>
Do like the follwing . I am changing your function as
$scope.getVisibleRows=function(arrayData,s)
{
console.log(s);
$scope.filerList=$filter('filter')(arrayData,s);
alert( $scope.filerList);
//want to get details of visible rows after filtration
}
and similarly change it is html also like ng-click="getVisibleRows(commodity.allPreferredCommodity,s)"
dont forget to inject filter to controller like myapp.controller('ctrcommodity',['$scope','$filter',function($scope,$filter)
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!
I have a table with items. When a row is clicked, detailed item information shows upp in a fixed div next to the table.
The div next to the table is hooked up to a parameter in the url. So when I click an item, the url changes the url to /project/:itemID
The issue is that when a row is clicked, the table "jumps" to another position. The scroll changes position. I want it to stay the same place.
This is my controller which changes the url:
$scope.goToProduct = function(id){
var path = $location.path();
var splitUrl = path.split('/');
var project = splitUrl[1];
console.log(project);
$location.path(project + '/' + id);
}
This is my view:
<input type="text" class="form-control" placeholder="Search">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Code</th>
<th>Namn</th>
<th>Manufactor</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products | filter:query" ng-click="goToProduct(product.pr_id)">
<td>{{product.pr_usercode}}</td>
<td>{{product.pr_title}}</td>
<td>{{product.pr_producer}}</td>
<td>{{product.pr_description}}</td>
</tr>
</tbody>
</table>
</div>
Any idea how to solve this?
Solved. Ui-router had a handy directive. Just add autoscroll="false". Docs: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-autoscroll
I am trying to make it possible so that by clicking on a 'client' in one of the following <td>s I can select that specific object from the 'clients' array and switch to a new view. I assume I would want to start with an ng-click, just not sure how to go about it. Also I will not be using any jquery.
<div ng-init="clients = [
{firstname:'Buster', lastname:'Bluth', tagid:'4134'},
{firstname:'John', lastname:'McClane', tagid:'9845'},
{firstname:'Mister', lastname:'Spock', tagid:'0905'}
]"></div>
<div>
<div>Clients</div>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>I-Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="client in clients">
<td>{{client.firstname}}</td>
<td>{{client.lastname}}</td>
<td>{{client.inumber}}</td>
</tr>
</tbody>
</table>
</div>
ng-click is the correct approach. You can get the selected object like this
<tr ng-repeat="client in clients" ng-click="redirect(client)">
Create a controller with the method:
function ctrl($scope, $location){
$scope.redirect = function(client){
console.log(client);
$location.url('/someurl'); //this is the routing defined in the $routingProvider, you need to implement it.
}
}
Make sure you refer to the class in the outer div containing the select like this
<div ng-controller='ctrl'>