Using angularjs
I have a table which column one I am binding it to a an array.
Second column is a dropdown.
I want to have other 5-6 columns (text and dropdown) which I want to show/hide based on the value of second column dropdown.
I tried the below code:
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td >{{item.name}}</td>
<td >
<select name="utype" class="form-control input-medium" ng-model="utype">
<option value="">---Please select---</option>
<option ng-repeat="type in types" >{{type.text}}</option>
</select></td>
<td><span ng-hide="utype =='Type1' || utype!=undefined" >{{item.value}}</span></td>
<td><button class="btn btn-small" ng-click="edit(item)">Edit</button></td>
</tr>
</tbody>
</table>
ng-hide="utype =='Type1' || utype!=undefined"
But this only works the first time. After hiding it does not work.
Could anyone point what I need to do to make it work:
utype!=undefined is always true after you set ng-model="utype"> the first time.
Take out utype!=undefined and try it.
<td><span ng-hide="utype =='Type1' >{{item.value}}</span></td>
Also, imo, you should use === rather than '=='. see this SO answer for details.
e.g.. ng-hide="utype ==='Type1'
Related
I have two grids of text boxes as shown here:
Input Boxes
The goal is that the user would fill out the above boxes and then as they fill out the below boxes, the above boxes auto update. ie if you entered 100 in the first box on the top and then 75 in the first box at the bottom, the first box would change to 25.
I tried to use onchange() but was unsuccessful. v-model seems to cause some problems with its two way binding, which makes sense. Any help is appreciated.
Here is the HTML that populates the input boxes:
> <form v-on:submit.prevent="addNewTask">
<table>
<thead>
<tr>
<th></th>
<th v-for="(column, columnIndex) in columns" :key="columnIndex">{{column}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(record, rowIndex) in records" :key="rowIndex">
<td>{{record.row}}</td>
<td v-for="(detail, index) in record.details" :key="index">
<input type="text" v-model="detail.value">
</td>
</tr>
</tbody>
</table>
<br><br>
<table>
<thead>
<tr>
<th></th>
<th v-for="(columnS, columnIndexS) in columns_Spend" :key="columnIndexS">{{columnS}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(recordS, rowIndexS) in records_Spend" :key="rowIndexS">
<td>{{recordS.rowS}}</td>
<td v-for="(detailS, indexS) in recordS.details_Spend" :key="indexS">
<input type="text" v-model="detailS.value_Spend">
</td>
</tr>
</tbody>
</table>
<br><br>
<button v-if="this.isEdit == false" type="submit" class="btn btn-success btn-block mt-3">
Submit
</button>
To start, split up the <td> nodes into child components, and emit their value on input change to the parent (main) component. Then use a method to calculate and set the remaining value for the "other" box child component (saved presumably inside an Array, you need to find the right element inside that Array in that method). The changed array will automatically update the other child component, as it is bound to the prop.
I have designed dynamic input matrix table. In that need to add select all option for each column. How to do that?
Here code:
<table [ngClass]="{'isDisplay': hasACLAccess}" class="responsive-table-input-matrix" id="matrixTable">
<thead>
<tr>
<th>Features/Roles</th>
<th *ngFor="let column of TableConfiguration.columns;">
{{column.title}}
<th>
</tr>
</thead>
<tbody *ngFor=" let feature of featureNameList">
<tr>
<td>{{feature.name}}</td>
<td *ngFor="let a of feature.roles">
<input name="access" [(ngModel)]="a.access" type="checkbox"
(change)="accessArrayList($event)">
</td>
</tr>
</tbody>
</table>
Thanks in advance.
In this, if checkbox of HR checked, then all checkboxes belongs to HR column should select, likewise for unchecked state also.
I im build a ASP.Net MVC 4 Application and i need to use two tables.
Example:
The first table i have the products that is in my database, when i click on the green button, the item need to be inside the table down, i can choose any item that i want and when i finish, i click on Save to register that "Sell", but i cant do that.
My question:
How can i get the item values from the first table using a button and pass to the controller?
Can i just put on the other table using JavaScript and when i finish i send to the controller?
I Just want pass data from table 1 to table 2!
My code:
Table 1
<!--Table to display registered products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach (var product in Model)
{
<tr>
<td>#Html.DisplayFor(model => product.idProduct)</td>
<td>#Html.DisplayFor(model => product.nameProduct)</td>
<td><p>R$#Html.DisplayFor(model => product.pricesaleProduct)</p></td>
<td><input type="text" class="form-control bfh-number" value="1"></td>
<!--Here i want get values to put on other table Or send to a controller-->
<td>
<a class="btn btn-success"><span class="glyphicon glyphicon-plus"> Adicionar</span></a>
</td>
</tr>
}
}
</tbody>
</table>
Table 2:
<!--Table to display selected products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
You want to create your bottom table as a Partial View and then AJAX to load it when the button is clicked... There are many examples, exactly like this:
http://www.binaryintellect.net/articles/218ca630-ba50-48fe-af6e-6f754b5894aa.aspx
I need one help. I need the table value as per index after filtration using Angular.js. I am explaining my code below.
index.html:
<span class="input-group-addon ndrftextwidth" style="width:120px; text-align:left;">Name :</span>
<input class="form-control" placeholder="Name" name="name" type="text" ng-model="search.shipping_name">
<input type="button" class="btn btn-success" ng-click="addProductViewData();" id="addProfileData" value="Import"/>
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<thead>
<tr>
<th>Sl. No</th>
<th>Name</th>
<th> Product Name</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr dir-paginate="pro in orderDataList | filter:search |itemsPerPage:5 track by $index">
<td>{{$index+1}}</td>
<td>{{pro.shipping_name}}</td>
<td>{{pro.product_name}}</td>
</tr>
</tbody>
</table>
In the above code you can see I have one search field and one button above of the table. Here I need suppose user typed one name and filtered value display inside the table. When user will click on that button all filtered data will fetch in JSON format inside controller page. Please help me.
I have a table that looks something like so
<table id="grid" class="table table-bordered table-hover table-inline">
<thead>
<tr>
<th>Id</th>
<th>Dropdown List</th>
<th><input id="selectAll" type="checkbox" /></th>
</tr>
</thead>
<tbody data-bind="foreach: stuff
<tr>
<td data-bind="text: someId"></td>
<td>
<select class="input-medium" data-bind="options: someStuff, optionsText:'DisplayName', optionsValue:'StandardCode'"></select>
</td>
<td>
<input type="checkbox" data-bind="value: someId"/>
</td>
</tr>
</tbody>
</table>
and then im my javascript I am iterating through the selected rows like this
$('grid input[type="checkbox"]:checked').each(function () {
var someSelectedId= $(this).val();
var dropDownlistValue= ??
});
I am using knockout to bind my data to the table and the drop down.
When i am iterating through the rows how do i get the selected value in the drop down list for each row as i am iterating through them? For the life of me i cant seem to figure it out. Thanks!
Use:
var dropDownlistValue = $(this).parent().prev().find('select.input-medium').val();
Or...
$(this).closest("tr").find("select.input-medium").val();
A.V's method is probably faster, but going to the TR allows more flexibility, as it'll find the select no matter where in the row it is.