AngularJS: on-click hide active table and show new one? - javascript

I have an html table, and when I click on any row new table shows with more specific information about some row data. I am using ng-click, ng-repeat and ng-show. Here is what I am trying to achieve: I want to do so, when I click on some row, the table shows and when I click on the same row again the table hides and also when some row is active, if you click on another row the first table hides and the new shows. Here is my html:
<tbody>
<tr ng-repeat-start="car in carList | filter:tableFilter" ng-click="modelRow.activeRow = car.name; car.showDetails = !car.showDetails">
....
</tr>
<tr ng-repeat-end ng-show="modelRow.activeRow==car.name && car.allReviews.length!=0 && car.showDetails" class="hidden-table">
<td colspan="6">
<table class="table table-striped table-bordered table-condensed table-hover">
<tbody ng-repeat="rev in car.allReviews">
....
</tbody>
</table>
</td>
</tr>
</tbody>
Here is my controller:
carApp.controller("TableBodyCtrl", function($scope){
$scope.modelRow = { activeRow: '' };
$scope.carList = [{"name":"Ford Focus hatchback",...,"showDetails":false}...];
And initially my "showDetails" in every object in my $scope.carList array is set to false.
Then as you can see in my html I do ng-click="modelRow.activeRow = car.name; car.showDetails = !car.showDetails".
It works fine, but when I click, for example, on "Volkswagen Golf" row then on "Ford Focus hatchback" and then again on "Volkswagen Golf" row, the table would not show up.
It is happening because when I click a bit on any rows "showDetails" values in $scope.carList array are set to true not false value.
How can I fix this issue or what the alternative way to achieve my goal?
Note: also I need a solution that will not slow my website, (my $scope.carList array have hundreds of cars)

make 'showDetails' a global variable not related to car.
make function for ng-click="func(car)".
$scope.func = function(car) {
if (!$scope.showDetails) {// open info
$scope.showDetails = true;
} else if ($scope.modelRow.activeRow = car.name && $scope.showDetails) {
// info was opened for, closing
$scope.showDetails = false;
} else { //info was opened, we open new one
$scope.showDetails = true;
}
$scope.modelRow.activeRow = car.name;
}

Related

Angular Material Data Table contents within row

When you have a table using md-data-table, How do you get the data for a particular row. Basically each row has a menu button and once they click on that button the data in that row should be saved in a variable:
html :
<td md-cell>
<label>{{item.count}}</label>
<i ng-click="setSomeVar(item)">you_icon</i>
</td>
method in controller :
$scope.setSomeVar = function(item)
{
$scope.someVar = item.count;
}

jQuery how to update range number of rows in table

I have table like this.
<tbody>
<tr class="count"><td class="int">1</td>...</tr>
<tr class="hide"></tr>
<tr class="count"><td class="int">2</td>...</tr>
<tr class="hide"></tr>
<tr class="count"><td class="int">3</td>...</tr>
<tr class="hide"></tr>
</tbody>
I used jQuery for dinamic webpage. when user removed a row from list, i need update number range at client again.
this is my code. but my result wrong expected.
$('.count').each(function() {
var ind = $(this).index()+1;
$(this).find(".int").html(ind);
});
*Note for rows that class hide not for view on browser, it for other point.
please help me to find it.
$(this).index() will not work in these case, because hidden elements also have index. Try like following.
$('.count').each(function(i) {
var ind = i + 1;
$(this).find(".int").html(ind);
});

How to store multi-selected row with color highlighted in javascript model table?

I am facing Issue related background colour change on submit(table row) need to be there(store) when i
go by modal (like pagination concept it's one page have some limited number of record) next and previous button, but code written like that it's every time refresh the page when i submit next and previous button . How I can Solve this ??
and 2nd when I select row it data come in list before submit when i remove row it not remove the colour from that table row, please help me any suggestion is welcome ??? below is my code ..
Code
function popRoleNext(){
$("#roleAddTable > tr").remove();
current=current+incremVal;
popRole();
}
function popRolePrev(){
$("#roleAddTable > tr").remove();
current=current-incremVal;
popRole();
}
Html Part Of Table
<table class="table table-striped table-bordered" id="roleAddTableMain">
<thead>
<tr>
<!-- <th class="col-sm-5">Role Id</th> -->
<th class="col-sm-6">Role Description</th>
</tr>
</thead>
<tbody id="roleAddTable">
</tbody>
</table>
</div>
Script part of table to retrieve data
function popRole(){
var roleAddTableValue="";
for(var i=current;i<current+incremVal;i++){
if(i>=arrCount) {//hide next button
$("#popRoleNextBtn").prop('disabled', true);
break;
}else if(arrCount==(current+incremVal)) {
$("#popRoleNextBtn").prop('disabled', true);
//break;
}
else{
$("#popRoleNextBtn").prop('disabled', false);
}
if(current<=0){
$("#popRolePrevBtn").prop('disabled', true);
}else{
$("#popRolePrevBtn").prop('disabled', false);
}
var arrValuesSub = arrValues[i].split(':');
roleAddTableValue = roleAddTableValue+"<tr>";
roleAddTableValue = roleAddTableValue+"<td id='"+arrValuesSub[0]+"' class='modelRoleId'>"+arrValuesSub[1]+"</td>";
roleAddTableValue = roleAddTableValue+"</tr>";
}
$("#roleAddTable").append(roleAddTableValue);
}

Selecting a row in table based on content and clicking link from selected row - Protractor

I have a page object that looks like this:
<table border>
<th>Email</th>
<th>action</th>
<tr current-page="adminUsers.meta.page">
<td>admin#example.com</td>
<td>Delete permanently</td>
</tr>
<tr current-page="adminUsers.meta.page">
<td>matilda#snape.com</td>
<td>Delete permamently</td>
</tr>
</table>
I want to create a method that will enable me to delete a user based on his email address.
This is what I came up with, basing on How to find and click a table element by text using Protractor?:
describe('Admin panel', function() {
it('admin deletes a user', function() {
var re = new RegExp("matilda#snape.com");
var users_list = element.all(by.xpath("//tr[#current-page='adminUsers.meta.page']"));
var delete_btn = element(by.xpath("//a[contains(text(), 'Delete permamently')]"));
users_list.filter(function(user_row, index) {
return user_row.getText().then(function(text) {
return re.test(text);
});
}).then(function(users) {
users[0].delete_btn.click();
});
// some assertion, not relevant right now
});
});
First I'm trying to filter the row in which there's a user I want delete (array with all rows fitting my filter, then selecting the first row - should be one row anyway) and then click corresponding Delete button.
However, from my debugging I know that the method ignores the filtering and clicks the first Delete button available in the table and not the first from filtered elements.
What am I doing wrong?
In this particular case, I would use an XPath and its following-sibling axis:
function deleteUser(email) {
element(by.xpath("//td[. = '" + email + "']/following-sibling::td/a")).click();
}
I agree with #alexce's short & elegant answer but #anks, why don't you delete inside your filter??
describe('Admin panel', function() {
it('admin deletes a user', function() {
var re = new RegExp("matilda#snape.com");
var users_list = element.all(by.xpath("//tr[#current-page='adminUsers.meta.page']"));
var delete_btn = element(by.xpath("//a[contains(text(), 'Delete permamently')]"));
users_list.filter(function(user_row, index) {
return user_row.getText().then(function(text) {
return if(re.test(text)) { //assuming this checks the match with email id
user_row.delete_btn.click();
}
});
})
// some assertion, not relevant right now
});
});

Knockout JS Binding and Filter Data

I have the following Problem
I have this Code to load Json Data from a external Web api
and Show it in my site this works..
but my Problem is
I must FILTER the Data with a Dropdown List
When i select the Value "Show all Data" all my Data must be Show
and when i select the Value "KV" in the Dropdown only the Data
with the Text "KV" in the Object Arbeitsort must Show..
How can i integrate a Filter in my Code to Filter my Data over a Dropdown ?
and the next is how can i when i insert on each Item where in HTML Rendered a Button
to Show Details of this Item SHOWS his Detail Data ?
when i click Details in a Item i must open a Box and in this Box i must Show all Detail Data
of this specific Item ?
$(document).ready(function () {
function StellenangeboteViewModel() {
var self = this;
self.stellenangebote = ko.observableArray([]);
self.Kat = ko.observable('KV');
$.getJSON('http://api.domain.comn/api/Stellenangebot/', function (data) {
ko.mapping.fromJS(data, {}, self.stellenangebote);
});
}
ko.applyBindings(new StellenangeboteViewModel());
});
I'll give this a go, but there's quite a few unknowns here. My suggestions are as follows:
First, create a computed for your results and bind to that instead of self.stellenangebote
self.stellenangeboteFiltered = ko.computed(function () {
// Check the filter value - if no filter return all data
if (self.Kat() == 'show all data') {
return self.stellenangebote();
}
// otherwise we're filtering
return ko.utils.arrayFilter(self.stellenangebote(), function (item) {
// filter the data for values that contain the filter term
return item.Arbeitsort() == self.Kat();
});
});
With regards the detail link, I'm assuming you are doing a foreach over your data in self.stellenangeboteFiltered(), so add a column to hold a link to show more details:
<table style="width:300px">
<thead>
<tr>
<th>Id</th>
<th>Arbeitsort</th>
<th>Details</th>
</tr>
</thead>
<tbody data-bind="foreach: stellenangeboteFiltered">
<tr>
<td><span data-bind="text: Id"> </span></td>
<td><span data-bind="text: Arbeitsort"> </span></td>
<td>Detail</td>
</tr>
</tbody>
</table>
Add a control to show details:
<div data-bind="visible: detailVisible, with: selectedItem">
<span data-bind="text: Position"> </span>
<span data-bind="text: Arbeitsort"> </span>
</div>
In your JS add a function:
// add some observables to track visibility of detail control and selected item
self.detailVisible = ko.observable(false);
self.selectedItem = ko.observable();
// function takes current row
self.showDetail= function(item){
self.detailVisible(true);
self.selectedItem(item);
};
UPDATE
Here's an updated fiddle: JSFiddle Demo

Categories