I have a table that is populated with ng-repeat. When the row is clicked I am retrieving the data related to the object with ng-click. The table is populated with a json file. How can I hide all of the other rows of the table when the selected row is clicked?
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody style="cursor: pointer" ng-cloak> <!--When the row is clicked, I want to hide all other rows except the clicked one.-->
<tr ng-repeat="person in people" ng-click="getSelected(person);">
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>{{ person.age }}</td>
</tr>
</tbody>
</table>
<script>
angular.module("App", []).controller("MainController", function ($scope) {
$scope.people = peopleData;
$scope.getSelected = function (person) {
$scope.selected = person;
};
});
</script>
Try adding the following to your <tr>. It basically says, hide this row if there is a selection and that selection isn't the current person being iterated over.
ng-hide="selected && selected !== person"
You could just set an ng-hide value on unselected rows when a selected value has been set:
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody style="cursor: pointer" ng-cloak ng-repeat="person in people"> <!--When the row is clicked, I want to hide all other rows except the clicked one.-->
<tr ng-hide="selected!==null && person!==selected" ng-click="getSelected(person);">
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>{{ person.age }}</td>
</tr>
</tbody>
</table>
<script>
angular.module("App", []).controller("MainController", function ($scope) {
$scope.people = peopleData;
$scope.selected = null;
$scope.getSelected = function (person) {
$scope.selected = person;
};
});
</script>
You will also probably want to move the ng-repeat as I did in the code above.
Related
Why am I getting same value in all rows of table. Table has rows and when row is clicked another row opens with additional information and every row contains same data like last clicked row. Probably it is cos I am saving data in same object, but I really don't know how to solve it. I am getting data from json files with factor, so you don't get confused, where my data is coming from. Here is the code. Thank you very much.
'use strict';
angular.module('sbAdminApp')
.controller('TreeTableCtrl', TreeTableCtrl);
function TreeTableCtrl($scope, $http, factor) {
$scope.nonCollapsedUser = [];
var getUsers = function () {
factor.getUse().then(function (response) {
$scope.users = response.data;
});
};
getUsers();
var getUsersInfo = function () {
factor.getChi().then(function (response) {
$scope.child = response.data;
console.log($scope.child);
});
};
getUsersInfo();
$scope.togglePerson = function (index) {
$scope.nonCollapsedUser.push(index);
$scope.newObj=$scope.child[index];
console.log($scope.newObj);
};
$scope.hidePerson = function (index)
{
for(var i=0; i<$scope.nonCollapsedUser.length; i++){
if($scope.nonCollapsedUser[i] === index){
$scope.nonCollapsedUser.splice(i, 1);
}
}
};
}
<div class="panel panel-default" style="background: #fcf8e3">
<div class="panel-body">
<table st-safe-src="leads" class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody ng-repeat="user in users track by $index">
<tr>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.lastName}}</td>
<td>
<button ng-if="nonCollapsedUser.indexOf($index) == -1" class="btn" ng-click="togglePerson($index)">
<i class="fa fa-arrow-down"></i></button>
<button ng-if="nonCollapsedUser | contains:$index" class="btn" ng-click="hidePerson($index)"><i
class="fa fa-arrow-up"></i></button>
</td>
</tr>
<tr ng-if="nonCollapsedUser | contains:$index">
<div>
<td>{{newObj.address}}</td>
<td>{{newObj.mobNumb}}</td>
</div>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
According to your description,
I assume your users, child arrays like this
$scope.users =[
{"id":1,"name":"Mirko","lastName":"Spriko"},
{"id":2,"name":"Pero","lastName":"Peric"},
{"id":3,"name":"Marko","lastName":"Prezime"}
];
$scope.child =[
{"address":"Address1","mobNumb":"47423756324"},
{"address":"Address2","mobNumb":"73454635545"},
{"address":"Address3","mobNumb":"87464343648"}
];
First you need to map child to users
angular.forEach($scope.users, function(value,key){
value.child =$scope.child[key];
});
Now you can achive your target
<table st-safe-src="leads" class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Last Name</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="user in users" >
<tr>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.lastName}}</td>
<td>
<button ng-show="nonCollapsedUser.indexOf($index) == -1" class="btn" ng-click="togglePerson($index)">
<i class="fa fa-arrow-down"></i>veiw</button>
<button ng-show="nonCollapsedUser.indexOf($index) > -1" class="btn" ng-click="hidePerson($index)"><i
class="fa fa-arrow-up"></i>hide</button>
</td>
</tr>
<tr ng-show="nonCollapsedUser.indexOf($index) > -1">
<td></td>
<td>{{user.child.address}}</td>
<td>{{user.child.mobNumb}}</td>
<td
</tr>
</table>
This is working JSFiddle
I am using a bootstrap admin preset theme and having trouble with their table functionality. Previously the table would display a searching function in the top right and allow you to sort the table by rows. I added a new table row for each entry in to the table and it broke this functionality. It has nothing to do with the 'hide' or 'show' on the second row but simply the addition of the second row for each entry. I had a brief browse around and think it has something to do with the number of elements in each row of the table that the search is trying to run on and there being a mismatch.
Is there any way I can still implement searching/sorting even after adding a second row to my table?
The code is as follows:
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Session Name</th>
<th>Provider</th>
<th>Status</th>
<th>Pricing Type</th>
<th>Subscription Type</th>
<th>JIRA Number</th>
<th>Accept Port</th>
<th>IP Addresses</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Session Name</th>
<th>Provider</th>
<th>Status</th>
<th>Pricing Type</th>
<th>Subscription Type</th>
<th>JIRA Number</th>
<th>Accept Port</th>
<th>IP Addresses</th>
</tr>
</tfoot>
<tbody>
{% for item in session_details %}
<tr onclick = "rowClick(this)">
<td>{{ item.session_name }}</td>
<td>{{ item.client_name }}</td>
<td>{{ item.current_status }}</td>
<td>{{ item.pricing_type }}</td>
<td>{{ item.subscription_type }}</td>
<td>{{ item.jira }}</td>
<td>{{ item.accept }}</td>
<td>
{% for ips in item.IP_Addresses %}
<li>{{ ips.ip_addr }}</li>
{% endfor %}
</td>
</tr>
<tr bgcolor="#f8f9fa">
<td colspan="8">
{% for notes in item.Notes %}
<p><b>Note: </b>"{{ notes.note }}"</p><p><small><strong> Time of entry: </strong><i>{{notes.time_now}}</i></small></p>
{% endfor %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
function rowClick(x)
{
var content = $(x).text().split('\n')[1];
console.log(content);
}
</script>
<script>
$( document ).ready(function()
{
console.log("ready!");
$("td[colspan=8]").find("p").hide();
$("table").click(function(event) {
event.stopPropagation();
var $target = $(event.target);
if ( $target.closest("td").attr("colspan") > 1 )
{
$target.slideUp();
} else
{
$target.closest("tr").next().find("p").slideToggle();
}
});
});
</script>
</div>
The error message that is produced in the developer console:
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
$.click() is a function that can't be used with new elements. It is initialized when the document is ready.
To use a function click with dynamic elements, use the function $.on('click', () => {}) http://api.jquery.com/on/
I have 2 datatables and what I wan is to fill the second datatable depending on witch row of the first datatable I clicked. Some sort of master-detail.
This is the master datatable:
<table id="tinzidentziak" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
<thead>
<tr>
<th>Id</th>
<th>Inzidentzia</th>
<th>Erabiltzailea</th>
<th>Engine version</th>
<th></th>
</tr>
</thead>
<tbody>
{% for i in inzidentziak %}
<tr>
<td>{{ i.id }}</td>
<td>{{ i.izena }}</td>
<td>{{ i.userid }}</td>
<td>{{ i.teknikoa }}</td>
<td></td>
</tr>
{% endfor %}
</tbody>
</table>
This is the detail datatable:
<table id="tdeiak" class="table table-bordered table-striped dataTable">
<thead>
<tr>
<th>id</th>
<th>Fetxa</th>
<th>Nork</th>
<th>Teknikoa</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
The first datatable is working ok, the problem comes when I tried to load the second datatable, I tried with this:
var table = $('#tinzidentziak').DataTable();
$('#tinzidentziak tbody').on( 'click', 'tr', function () {
var midata=table.row( this ).data();
$('#tdeiak').Datatable({
"ajax": "deiak.json"
});
} );
I tried first without any parameter, just for check if it´s possible to load the second datatable this way. I´ve got this error:
Uncaught TypeError: $(...).Datatable is not a function
on the line $('#tdeiak').Datatable({
Any help or clue?
It's DataTable not Datatable
Change
$('#tdeiak').Datatable({
"ajax": "deiak.json"
});
to
$('#tdeiak').DataTable({
"ajax": "deiak.json"
});
index.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data =[{"Id":1,"Title":"en-US","Description":"UnitedStates","MyValues":[{"Id":100,"Value":"Save"}]},
{"Id":1,"Title":"en-UK","Description":"UK","MyValues":[{"Id":102,"Value":"Delete"}]}]
$scope.cols = Object.keys($scope.data[0]);
$scope.notSorted = function(obj){
if (!obj) {
return [];
}
return Object.keys(obj);
}
});
index.html
<table border=1>
<thead>
<tr>
<th ng-repeat="key in notSorted(cols)" ng-init="value=cols[key]">{{value}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data">
<td ng-if="!$last" ng-repeat="dat in notSorted(row)" ng-init="value=row[dat]">{{value}}</td>
</tr>
</tbody>
</table>
It gives me perfect table but problem is in one column MyValues.
I have list of data and want to create nested table with all List value.
How can I achieve this? Want to check if any column has List if yes
then generate nested table.
check this plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview
You write your markup this way:
<table>
<thead>
<tr>
<th ng-repeat="(k,v) in data[0]">{{k}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)">
<table ng-if="isArr">
<thead>
<tr>
<th ng-repeat="(sh, sv) in value[0]">{{sh}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sub in value">
<td ng-repeat="(sk, sv) in sub">{{sv}}</td>
</tr>
</tbody>
</table>
<span ng-if="!isArr">{{value}}</span>
</td>
</tr>
</tbody>
</table>
Full code: https://gist.github.com/anonymous/487956892d760c17487c
I'm not really sure what you want to render, but this might give you some ideas.
see: http://plnkr.co/edit/znswagx45a2F7IThdQJn?p=preview
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data =[{"Id":1,"Title":"en-US","Description":"UnitedStates","MyValues":[{"Id":100,"Value":"Save"}]},
{"Id":1,"Title":"en-UK","Description":"UK","MyValues":[{"Id":102,"Value":"Delete"}]}]
$scope.cols = Object.keys($scope.data[0]);
$scope.notSorted = function(obj){
if (!obj) {
return [];
}
return Object.keys(obj);
}
});
index.html
<table border=1>
<thead>
<tr>
<th ng-repeat="key in notSorted(cols)" ng-init="value=cols[key]">{{value}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data">
<td ng-if="!$last" ng-repeat="dat in notSorted(row)" ng-init="value=row[dat]">
<div ng-if="value[0].Id">
<table>
<tr>
<td>Id:</td><td>{{value[0].Id}}</td>
</tr>
<tr>
<td>Value:</td><td>{{value[0].Value}}</td>
</tr>
</table>
</div>
<div ng-if="!(value[0].Id)">
{{value}}
</div>
</td>
</tr>
</tbody>
</table>
If you need to be more general, maybe instead of <div ng-if="value[0].Id"> you could do something like <div ng-if="angular.isArray(value)">. I didn't have time to try and get that working though, but something to look into.
I'm stuck in getting parent ng-repeat value using child ng-repeat slug. It shows nothing just blank td's
What I've done
$scope.column = [column_id: "12"slug: "item6"sort: "0"status: "1"title: "Contact no"ts_datetime: "2014-12-12 12:27:50"];
$scope.column.item = [item1: "1"item2: "2"item3: "3"item4: "4"item5: "5"item6: "8"item_id: "1"status: "1"]
<table class="table table-bordered table-striped">
<thead>
<tr>
<th ng-repeat="column in columns" >{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in listings">
<td ng-repeat="column in columns" ng-init="val = item.column.slug">{{ val }}</td>
</tr>
</tbody>
</table>
What I want is this. to get the value of item with the slug of column. Like item.column.slug
It looks like you want to use:
<td ng-repeat="column in columns">{{item[column].slug}}</td>