Is it possible in AngularJS to change the style of row when the available stocks is equals to 10? or is there any way to do this?.. how to do that?
Here's my code..
<table id='table12'>
<thead id='top'>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
<th>Stock In</th>
<th>Available Stocks</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr id="clickrow" ng-repeat="inventory in data | filter:searchFilter">
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.product_id}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.product_name}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.price}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.stock_in}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.available_stocks}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.description}}</td>
</tr>
</tbody>
</table>
You can do it with ng-class by passing an object with a test against inventory.price value:
<tr id="clickrow" ng-repeat="inventory in data | filter:searchFilter" ng-class="{'red' : inventory.price <= 10}">
...
</tr>
you can change style of row with anulgarJS via html markup and via js code:
markup -
1.1. ng-style: <div data-ng-style="{background: price > 50 ? 'red' : 'green'}"></div>
1.2. ng-class: <div data-ng-class="{'some-class-name': price > 50, 'other-class-name': price <= 50}></div>
js code -
2.1. directive link function:
link: function (scope, element, attrs, ctrl){
element.find('tr').css(...); // like as jquery...
}
2.2. controller:
angular.module('myModule').controller('myCtrl', function($element, $scope){ $element.find('tr').css(...); // like as jquery} })
<tr ng-repeat="task in todos"
ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
'active': task.status == 'Started', 'danger': task.status == 'Pending' } "></tr>
You can use above syntax to highlight table rows
Related
I’m using Bootstrap Table http://bootstrap-table.wenzhixin.net.cn/
All rows in the table are linked with data-href=.
All links work correctly after the table is loaded, but when I re-sort the table (i.e. click on "URL" column header), the links no longer work.
Any ideas how to fix it?
Here is a test code:
<table class="table" id="lst_art_adm"
data-toggle="table"
data-striped="true"
data-search="true"
data-sort-name="site"
data-sort-order="asc"
data-mobile-responsive="true"
mobileResponsive="true">
<thead>
<tr>
<th data-field="site" data-sortable="true">Site</th>
<th data-field="url" data-sortable="true">URL</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="mrow" data-href="https://google.com">
<td id="td-id-1" data-sortable="true">Google</td>
<td>google.com</td>
</tr>
<tr id="tr-id-2" class="mrow" data-href="https://yahoo.com">
<td id="td-id-2" data-sortable="true">Yahoo</td>
<td>yahoo.com</td>
</tr>
</tbody>
</table>
$(function(){
$(".mrow").on("click", function (e) {
window.location = $(this).data("href");
});
});
And the jsfiddle
I found a solution myself :)
The table must be included in a div element, i.e. class="mytable".
Then the jquery should be changed like this:
$(function(){
$(".mytable").on("click", ".table tbody tr", function()
window.location = $(this).data("href");
});
});
Then the function will found the row after re-sorting.
I am new in ASP.NET MVC. There are 2 tables in my database named "tbl_Project" and "tbl_Note". Each project can have one or more notes, so I keep/save the "ProjectID" variable in the "tbl_Note".
What I want to do: On the page where the project list is located, I want to show the total number of notes for each project. I tried a few things but I've fail.
This is my projects list page:
#if(Model.Any())
{
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
<th>Total Note</th>
<th>Project Name</th>
<th>Contract Start Date</th>
<th>Contract End Date</th>
</tr>
</thead>
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
<!-- Total number of notes will come here -->
</td>
<td>
<p>#item.ProjectName</p>
</td>
<td>
#item.ContractStartDate.Value.ToString("dd.MM.yyyy");
</td>
<td>
#item.ContractEndDate.Value.ToString("dd.MM.yyyy");
</td>
</tr>
</tbody>
}
</table>
}
else
{
<p>Project is not available!</p>
}
I've try something like this but it's not working:
#if(item.tbl_Note != null)
{
if(item.tbl_Note.ProjectID == Model.ProjectID)
{
#Model.Sum(b => b.tbl_Note.ProjectID.Count)
}
}
This line gives an error: item.tbl_Note.ProjectID and the error is: 'ICollection' does not contain a definition for 'ProjectID and no extension method 'ProjectID' accepting a first argument of type 'ICollection' could be found.
How can I calculate the total number of notes? And if there is any other code block you want to insert, please tell me.
According to the error, item.tbl_Note is of type ICollection<T> and you are looking for a ProjectID property in it.
Change it to:
#if(item.tbl_Note != null)
{
#item.tbl_Note.Count
}
I have a specific table to display.
It displays an array of objects.
My object contains:
common data (displayed in black in the table)
'income' specific data (displayed in red in the table)
'depense' specific data (displayed in green in the table)
I did something that looks like what I want but I'm not sure I did it in the clean way.
plunkr
<table border=1>
<thead>
<tr>
<th></th>
<th colspan=5>Depense</th>
<th colspan=5>Income</th>
</tr>
<tr>
<th rowspan=2> id invoice</th>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
<th>title5</th>
<th>title6</th>
<th>title7</th>
<th>title8</th>
<th>title9</th>
<th>title10</th>
</tr>
<tr>
<th>depense1</th>
<th>depense2</th>
<th>depense3</th>
<th>depense4</th>
<th>depense5</th>
<th>income1</th>
<th>income2</th>
<th>income3</th>
<th>income4</th>
<th>income5</th>
</tr>
</thead>
<tbody>
<tr >
<td rowspan=2>id invoice : 10</td>
<td>10/02/2015</td>
<td>tartenpion</td>
<td>II</td>
<td>AA</td>
<td>1.25</td>
<td>FRED</td>
<td>fact 12</td>
<td>10</td>
<td>13</td>
<td>xx</td>
</tr>
<tr>
<td>avoir1</td>
<td>avoir2</td>
<td>avoir3</td>
<td>avoir4</td>
<td>avoir5</td>
<td>vente1</td>
<td>vente2</td>
<td>vente3</td>
<td>vente4</td>
<td>vente5</td>
</tr>
</tbody>
</table>
Plus : in order to display each record on two rows I had to add a column called "id invoice", then as I don't want it to be display I added some css to hide it.
I am pretty sure my code is dirty, but I don't know how to do that another way.
If someone can help me on this...
I have this bootstrap table where I cannot populate with my data, on data-url im calling a function inside my controler, when I inspect the the object i can see that it loaded correctly but for some reason it not populating the table Am I missing somenthing?
<table id="t_user" class="table table-hover tbl_usr"
data-toggle="table"
data-url="<?php echo site_url('mda_user/tblrefresh')?>"
data-toolbar="#custom-toolbar"
data-click-to-select="true"
data-single-select="true"
data-search="false"
data-show-refresh="false"
data-show-toggle="true"
data-show-columns="true"
data-pagination="true"
data-search="true"
data-height="300"
data-response-handler="responseHandler">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" data-sortable="true"><?= $id?> </th>
<th data-field="name" data-sortable="true"><?= $name?> </th>
<th data-field="password"> <?=$password?></th>
<th data-field="operate"
data-halign="center"
data-align="center"
data-formatter="operateFormatter"
data-events="operateEvents">
<?=$operation?>
</th>
</tr>
</thead>
</table>
What is the content of your responseHandler(res) function?
eg, I defined my table mostly inline but also with some JS:
$().ready(function(){
$('#myTable').bootstrapTable({
url : "/api/data",
responseHandler: function(res) {
return res.data.content;
}
})
(The response is wrapped in some JSON that I need to remove to pass the pure array to bootstrap-table)
I'm very new to smarty and I'm trying to figure out a way to hide questions under each section title in a long form. I would need to add some id or class to the section name and some div to wrap to the questions under this specific section title so I can target them in css or js, but I'm breaking my head to find a way to do that with smarty.
Here is my code:
{if !empty($questionList)}
{foreach from=$questionList key='section' item='questions'}
{if !empty($section) }
<tr class="ow_tr_first"><th colspan="3" class="section_label">{text key="base+questions_section_`$section`_label"}</th></tr>
{/if}
{foreach from=$questions item='question' name='question'}
<tr class="{cycle values='ow_alt1,ow_alt2'} {if $smarty.foreach.question.last}ow_tr_last{/if}">
<td class="ow_label">
{label name=$question.name}
</td>
<td class="ow_value">
{input name=$question.name}
<div style="height:1px;"></div>
{error name=$question.name}
</td>
</tr>
{/foreach}
<tr class="ow_tr_delimiter"><td></td></tr>
{/foreach}
{/if}
Any help would be awesome :)
You can try to use the current iteration of the first foreach to create unique identifiers/classes:
i.e.
{foreach from=$questionList key='section' item='questions' name='loop'}
{if !empty($section) }
<tr class="ow_tr_first"><th colspan="3" class="section_label" id="question{$smarty.foreach.loop.iteration}">{text key="base+questions_section_`$section`_label"}</th></tr>
{/if}
<tr class="question{$smarty.foreach.loop.iteration}_child {cycle values='ow_alt1,ow_alt2'} {if $smarty.foreach.loop.last}ow_tr_last{/if}">
So you willl end up with something like this:
<tr><th class="section_label" id="question1"></th></tr>
<tr class="question1_child">....</tr>
<tr class="question1_child">....</tr>
<tr class="question1_child">....</tr>
<tr><th class="section_label" id="question2"></th></tr>
<tr class="question2_child">....</tr>
<tr class="question2_child">....</tr>
<tr class="question2_child">....</tr>
and so on. That would be quite easy to target with css or javascript, i.e. hiding all .question1_child or showing all #id_name+'_child' when a certain .section_label is pressed