I am trying to make a expandable rows to the table. I do not get any error messages but it is not working as expected. I suspect there is something wrong how I am using expressions with ng-show here?
plunker
my code:
<table class='table'>
<thead>
<tr>
<th>name</th>
<th>itemOne</th>
<th>itemTwo</th>
</tr>
</thead>
<tbody ng-repeat="data in tableData| orderBy:'-clintonValuemain'">
<tr>
<td>
<button ng-show="data.expand" ng-click='data.expand = true'>+</button>
<button ng-show="!data.expand" ng-click='data.expand = false'>-</button>
<input type="checkbox" class='checkbox'>
<a rel="noopener" target="_blank" href={{data.url}}>
{{data.name}}
</a>
</td>
<td>{{data.valueMain}}</td>
<td>{{data.tValue}}</td>
<tr>
<tr ng-show="data.expand" ng-repeat="subs in data.subvalues| orderBy:'-clintonValuesub'" >
<td>
{{subs.name}}
</td>
<td>
{{subs.valueSub}}
</td>
<td>
{{subs.tValue}}
</td>
</tr>
</tr>
</tr>
</tbody>
</table>
Try this out
<button ng-show="data.expand" ng-click='data.expand = false'>-</button>
<button ng-show="!data.expand" ng-click='data.expand = true'>+</button>
updated plunker
https://plnkr.co/edit/sJDFAp1KDvhYh8K3q7z2?p=preview
Related
$("#zz").click(function() {
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>
<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>
</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
<td class="sorting_1">
<img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th></th>
<th>Established On</th>
<th>Objective</th>
<th>Target Value</th>
<th>Baseline Value</th>
<th>Monitorng mechanism</th>
<th>Target Date</th>
<th>Action Plan</th>
<th>Frequency of Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="add" id="add" src="/Images/add.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th>
Objective Evaluated On
</th>
<th>
Objective Measured Value
</th>
<th>
From Period
</th>
<th>
To Period
</th>
<th>
Trend
</th>
<th>
NCR Ref. (If Objective not achieved)
</th>
<th>
Status of Objective Evaluation
</th>
<th>
Objective Evidence
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
09/07/2019 </td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td>
09/07/2019 </td>
<td>
<p>Not Available</p>
</td>
<td> Annually</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
1
</td>
<td>
<a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
</td>
<td>
2019
</td>
<td>
Department
</td>
<td>
HR DEPARTMENT
</td>
<td>
Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
</td>
<td>
Approved
</td>
<td>
<span class="badge badge-info">No File attached</span>
</td>
<td>
<a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
</td>
<td>
<span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
</td>
</tr>
The above is just an example of a row from my table.
Upon appending $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); on a button click the table becomes visible in the new <tr>
To my extend my knowledge , apparently it's been appended directly to tr since the display is set to none, does the dom elements work like this ?
I'm novice at the most, when it comes to html.
Can Anyone please explain why this happens ?
Any relevant information will greatly appreciated.
Your selection (using html()) returns the contents of the element, not the element itself, so any attributes on the element are also disregarded. One easy fix might be to move your hide styles down a level:
<div id="data_hidden">
<table style="display:none">
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
Demo 1
This leaves the original div element in the DOM, but it doesn't affect appearance.
Alternatively, grab the outerHTML of the selection's raw element:
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>"
+ $(this).next().get(0).outerHTML + "</td></tr>");
});
Demo 2
I have a table with buttons on each row. I am trying to click on a button on a particular and it picks the value .claim_value field of the same row and put the value in the td opposite it .vet_value.
Here's my code
<table id="tasks" class="col-md-12 table">
<thead>
<tr>
<td>Service</td>
<td>Key notes</td>
<td>Claim Amount</td>
<td>Vetted Amount</td>
</tr>
</thead>
<tbody>
<tr class="therow">
<td class="claim_value">hey</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">you</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">me</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">them</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
</tbody>
</table>
so i want to be able to click on class="button"
$(".button").click(function(){
(".claim_value").val() of this same row goes into (".vet_value").val()
});
Just call parent() to access the parent <tr> element and modify <td> from there
$(".button").click(function(){
var $parent=$(this).parent();
var claimValue=$parent.find(".claim_value").text();
$parent.find(".vet_value").text(claimValue);
});
you don't need to use .val() unless the element is input or textarea
with td use .text() also you need to use $(this) to refer to the button you clicked and closest('tr') to select the closest row then .find() to find the element with class you want
$(".button").click(function(){
var claim_value = $(this).closest('tr').find(".claim_value").text();
$(this).closest('tr').find(".vet_value").text(claim_value);
});
Use html() that is not val(). Insert td inside which has to be the direct child of tr. As val() only comes for input and textarea.
$(".button").click(function(){
alert($(this).closest('tr').find(".claim_value").html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tasks" class="col-md-12 table">
<thead>
<tr>
<td>Service</td>
<td>Key notes</td>
<td>Claim Amount</td>
<td>Vetted Amount</td>
</tr>
</thead>
<tbody>
<tr class="therow">
<td class="claim_value">hey</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">you</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">me</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">them</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
</tbody>
</table>
I'm creating a web app in mvc with angularjs in which i want to filter the data inside my table but I'm getting error while I debug my code.
This is what the error is
Error: $rootScope:infdig Infinite $digest Loop 10 $digest() iterations
reached. Aborting! Watchers fired in the last 5 iterations: []
I tried something like this
<tr ng-repeat="d in dataintbl| filter:search">
and I added another tr in my thead
<td>
<input type="text" ng-model="search.taskstartdate" placeholder="" class="erp-input" />
</td>
this is how my table looks
<table class="table table-bordered">
<thead>
<tr class="bg-primary">
<th>Task Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Priority</th>
<th>Action</th>
<th ng-hide="true">autoid</th>
</tr>
<tr>
<td>
<input type="text" ng-model="search.taskstartdate" placeholder="" class="erp-input"/>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in dataintbl" ng-class="{'changecolor':(d.IsCompleted=='True')}">
<td>{{d.taskname}}
</td>
<td>{{d.taskstartdate}}</td>
<td>{{d.taskenddate}}</td>
<td ng-class="{'greenrow': (d.taskpriority == 'Low'), 'yellowrow': (d.taskpriority == 'Medium'), 'redrow': (d.taskpriority == 'High')}">
{{d.taskpriority}}
</td>
<td>
<span ng-class="{'hidespan':(d.IsCompleted=='False')}">Completed</span>
<div ng-class="{'hidebutton':(d.IsCompleted=='True')}">
<a href="#" ng-click="updatetask(d)" data-toggle="modal" title="EDIT TASK" data-target="#myModalb"
class="btn btn-warning glyphicon glyphicon-edit"></a>
<a href="#" ng-click="deleteuser(d)" title="DELETE TASK"
class="btn btn-danger glyphicon glyphicon-trash"></a>
<a href="#" ng-click="taskcompleted(d)" title="COMPLETE TASK"
class="btn btn-success glyphicon glyphicon-ok"></a>
</div>
</td>
</tr>
</tbody>
</table>
I just want to understand, how can i give filters to the users?
you need to change the following line
<tr ng-repeat="d in dataintbl" ng-class="{'changecolor':(d.IsCompleted=='True')}">
to something like this
<tr ng-repeat="d in dataintbl | filter:search.taskstartdate" ng-class="{'changecolor':(d.IsCompleted=='True')}">
and everything is looking fine
I have the following array where each item's value is a string that is html. How can I turn this string into executable html, so that it can be shown?
[
{html:'<button>name</button>'},
{html:'<table > <thead> <tr> <th>#</th> <th>UserName</th> <th>Time</th> <th>Comments</th> <th>Reply</th> <!-- <th>like or dislike</th> --> </tr> </thead> <tbody> <tr> <td>1,001</td> <td><a href="#" >Lorem</a></td> <td>2014-10-31</td> <td>ipsum</td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,002</td> <td>amet</td> <td><a><span ></span></a></td> <td><a><span ></span></a></td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,003</td> <td>Integer</td> <td>nec</td> <td>odio</td> <td> <button type="submit"> <span></span></button></td> </tr> <tr> <td>1,003</td> <td>libero</td> <td>Sed</td> <td>cursus</td> <td> <button type="submit" > <span></span></button></td> </tr> </tbody> </table>'},
{html:'<p>myhtml</p>'}
]
See codepen here: http://codepen.io/chriscruz/pen/YPwVmb
See below for HTML
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<th>Email</th>
</thead>
<tbody>
<tr ng-repeat="(id,item) in data">
<td>{{item.html}}</td>
</tr>
</tbody>
</table>
</body>
Javascript and Angular JS
var app = angular.module("app", ["firebase"]);
app.factory("TestArray", ["$firebase", function($firebase) {
lst = [
{html:'<button>name</button>'},
{html:'<table > <thead> <tr> <th>#</th> <th>UserName</th> <th>Time</th> <th>Comments</th> <th>Reply</th> <!-- <th>like or dislike</th> --> </tr> </thead> <tbody> <tr> <td>1,001</td> <td><a href="#" >Lorem</a></td> <td>2014-10-31</td> <td>ipsum</td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,002</td> <td>amet</td> <td><a><span ></span></a></td> <td><a><span ></span></a></td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,003</td> <td>Integer</td> <td>nec</td> <td>odio</td> <td> <button type="submit"> <span></span></button></td> </tr> <tr> <td>1,003</td> <td>libero</td> <td>Sed</td> <td>cursus</td> <td> <button type="submit" > <span></span></button></td> </tr> </tbody> </table>'},
{html:'<p>myhtml</p>'}
]
return lst;
}]);
app.controller("ctrl", ["$scope","TestArray", function($scope,TestArray) {
$scope.data = TestArray;
//$scope.data = Emails;
}]);
This is the desired result that I'd like to see: http://codepen.io/chriscruz/pen/pvgwzw?editors=101
Here is the Updated CodePen
you need to add angular-sanitize.js file
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-sanitize.js"></script>
and import ngSanitize module in app
var app = angular.module("app", ["firebase",'ngSanitize']);
then you can bind the html using ng-bind-html directive
<td ng-bind-html="item.html"></td>
I want to be able to click a button on a table and update the row information. I have the back-end all set up to do this. I am just having trouble being able to get at the table generated by angular. Here is my html template:
<br />
<table id="recordTable" border="1px">
<tr><td ng-repeat="column in columns"><strong>{{column.column_name}}</strong></td> </tr>
<tr ng-repeat="record in records">
<td ng-repeat="cell in record.cells"> {{cell}} </td>
<td><button ng-click="delete($index)">Delete</button></td>
<td><button ng-click="update($index)">Update</button></td>
</tr>
</table>
<br />
When I call the function update($index), I would like to be able to turn the text that is currently filled with {{column.column_name}} into a text input with the {{column.column_name}} as the default text. I could not find anything in the Docs for this. Any thoughts?
I've made a slight change to the record.cells array, now it is [{value : 'Value1'},{value : 'Value2'}]
<table id="recordTable" border="1px">
<tr>
<td ng-repeat="column in columns">
<strong>{{column.column_name}}</strong>
</td>
</tr>
<tr ng-repeat="record in records">
<td ng-repeat="cell in record.cells">
<span ng-show="mode != 'edit'">{{cell.value}}</span>
<input ng-show="mode == 'edit'" ng-model="cell.value" />
</td>
<td><button ng-click="delete($index)">Delete</button></td>
<td>
<button ng-show="mode != 'edit'" ng-click="mode = 'edit'">Update</button>
<button ng-show="mode == 'edit'" ng-click="mode = null">Save</button>
</td>
</tr>
</table>
Demo: Plunker