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
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.
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!
My site allows for a user to search for a term which returns a table of associated songs. When the "Add Track" button in a particular row is clicked after the search, the respective track name and trackId are added to the table "playlist". The problem I am having is that once "Add Track" is clicked within a different row, the data from that row is not added to the "playlist" table, but rather it just replaces the previous information. I need to be able to generate a cumulative table. Any help would be great and thanks in advance!
<body ng-app>
<body ng-app>
<div ng-controller="iTunesController">
{{ error }}
<form name="search" ng-submit="searchiTunes(artist)">
<input type="search" required placeholder="Artist or Song" ng-model="artist"/>
<input type="submit" value="Search"/>
</form>
<div class="element"></div>
<table id="SongInfo" ng-show="songs">
<thead>
<tr>
<th>Album Artwork</th>
<th>Track</th>
<th></th>
<th>Track Id</th>
<th>Preview</th>
<th>Track Info</th>
<th>Track Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="song in songs">
<td><img ng-src="{{song.artworkUrl60}}"
alt="{{song.collectionName}}"/>
</td>
<td>{{song.trackName}}</td>
<td><button ng-click="handleAdd(song)">Add Track</button></td>
<td>{{song.trackId}}</td>
<td>Play</td>
<td>View Track Info</td>
<td>{{song.trackPrice}}</td>
</tr>
</tbody>
</table>
<table id="playlist">
<thead>
<tr>
<th>Playlist</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="song in addedtracks">
<td>{{song.trackName}}</td>
<td>{{song.trackId}}</td>
</tr>
</tbody>
</table>
</div>
</body>
itunes_controller.js
var iTunesController = function($scope, $http){
$scope.searchiTunes = function(artist){
$http.jsonp('http://itunes.apple.com/search', {
params: {
'callback': 'JSON_CALLBACK',
'term': artist,
limit: 5,
}
}).then(onSearchComplete, onError)
}
$scope.handleAdd = function(song) {
// this song object has all the data you need
console.log("handle add ", song)
$scope.addedtracks = [{song:'trackName', song:'trackID'}]
$scope.addedtracks.push(song)
}
var onSearchComplete = function(response){
$scope.data = response.data
$scope.songs = response.data.results
}
var onError = function(reason){
$scope.error = reason
}
}
I saw some issues with your code. First the code below
$scope.addedtracks = [{song:'trackName', song:'trackID'}]
$scope.addedtracks.push(song)
Acording to your html, you are passing the song object to the handleAdd. So just remove the first line from code above. After that step, declare addedtracks array before handleAdd like below
$scope.addedtracks = [];
Modify the ng-repeat for the playlist like below:
<tr ng-repeat="song in addedtracks track by $index">
<td>{{song.trackName}}</td>
<td>{{song.trackId}}</td>
</tr>
And that's it. Note that I used track by $index because ngRepeat does not allow duplicate items in arrays. For more information read Tracking and Duplicates section.
Finally this is working plunker
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
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'>