I have the following table:
Lot Table View
I am using three ng-repeat to show the following response.
Response from backend overview
Detailed response from backend
The first ng-repeat is in <tbody> . The second ng-repeat is in <tr>. And the third one is for repeating the Lot Details, Trx Qty and Balance which is <span>.
Following is my html code:
<table id="lotTable" class="table table-striped table-bordered table-vmiddle">
<thead>
<tr>
<th>S No.</th>
<th>Lot No.</th>
<th>Lot Qty</th>
<th>Unit Cost</th>
<th>Lot Details</th>
<th>Trx Qty</th>
<th>Balance</th>
</tr>
</thead>
<tbody ng-if="isDataLot=='yes'" ng-repeat-start="l in lotData track by $index"
ng-init="parentIndex = $index" id=parentRow{{$index}}
data-id="{{l.lotNo}}">{{$index}}
<tr ng-repeat="k in l track by $index">
<td class="indextrack" >{{$index+1}}
</td>
<td class="lotNo">
<input type="hidden" class="hiddenLotNo" value="{{l.lotNo}}"/>
{{ k.lotNo }} <br>
{{k.grnNo}} ({{k.grnDate}}) <br>
{{k.inPermit}} {{k.physicalLocationName}}
</td>
<td class="lotQty">{{k.lotQty}}
</td>
<td class="cost">{{ k.unitPrice | number:4}}
</td>
<!-- Lot Details -->
<td class="lotDetails" style=" line-height: 28px; ">
<span ng-repeat="c in k.lotDetails">
<input type="hidden" class="hiddenLotDetails m-b-5"
id="lotDetails{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}"
ng-model="xxx[$index]" value="{{c}}"/>
{{c | ctnchange : c}}<br>
{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}
</span>
</td>
<!-- Transaction Quantity -->
<td class="trxQty" style="padding-top: 10px; padding-bottom: 10px;">
<span ng-repeat="c in k.lotDetails track by $index" >
<input class="trxQuantity m-b-5 text-right"
id="trx{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}"
autocomplete="off"
ng-model="trx[$parent.$index][$index]"
ng-keyup="calculateBal($parent.$index,$index); checkParentCheckbox($event);addTrxQty();"
style="width: 60px;" integers-only/><br>
</span>
</td>
<!-- Balance -->
<td class="balanceNew" style="padding-top: 10px; padding-bottom: 10px;">
<span ng-repeat="c in k.lotDetails track by $index">
<input ng-disabled="true" class="balanceNew m-b-5 text-right"
id="balNew{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}"
type="text" style="width: 60px;"/>
<br>
</span>
</td>
</tr>
</tr>
</tbody>
<tbody ng-repeat-end></tbody>
I want to dynamically name the models of Lot Details, Trx Qty and Balance . I have named there ids using id="trx{{$parent.$parent.$index}}{{$parent.$index}}{{$index}} for transaction quantity. I want to achieve the same for ng-model.
I have used ng-model="trx[$parent.$index][$index]. But I have three nested ng-repeat. This is good for two nested ng-repeat. How can it be done for three ng-repeat?
Also I have to set the $scope.trx[i][j] values in controller.
What is the right way to name the model so that we can also set its value in controller?
I changed my HTML code to this :
<table id="lotTable" ng-table="tableSorting" class="table table-striped table-bordered table-vmiddle">
<thead>
<tr>
<th ng-hide="true"></th>
<th>S No.</th>
<th>Lot No.</th>
<th>Lot Qty</th>
<th>Unit Cost</th>
<th>Lot Details</th>
<th>Trx Qty</th>
<th ng-hide="true">Balance</th>
<th>Balance</th>
</tr>
</thead>
<tbody ng-if="isDataLot=='yes'" ng-repeat-start="l in lotData track by $index" ng-init="parentIndex = $index" id=parentRow{{$index}} data-id="{{l.lotNo}}">
<tr ng-repeat="k in l track by $index" ng-init="lotDataChildIndex = $index">
<td header-class="'text-center'" ng-hide="true">
<div class="checkbox">
<label>
<input type="checkbox" class="checkhead" id="lotHiddenCheckbox{{parentIndex}}{{lotDataChildIndex}}">
<em class="input-helper"></em>
</label>
</div>
</td>
<td class="indextrack" >{{$index+1}}
<input type="hidden" class="hiddenalcoholPer" value="{{k.alcoholPer}}" />
<input type="hidden" class="hiddencascCode" value="{{k.cascCode}}" />
<input type="hidden" class="hiddencreditorCode" value="{{k.creditorCode}}" />
<input type="hidden" class="hiddencreditorName" value="{{k.creditorName}}" />
<input type="hidden" class="hiddencustomAmnt" value="{{k.customAmnt}}" />
<input type="hidden" class="hiddenduty" value="{{k.duty}}" />
<input type="hidden" class="hiddendutyPaid" value="{{k.dutyPaid}}" />
<input type="hidden" class="hiddenhsCode" value="{{k.hsCode}}" />
<input type="hidden" class="hiddenidUom" value="{{k.idUom}}" />
<input type="hidden" class="hiddenunitPrice" value="{{k.unitPrice}}" />
<input type="hidden" class="hiddenuomCode" value="{{k.uomCode}}" />
<input type="hidden" class="hiddenidGrnforLot" value="{{k.idGrn}}" />
<input type="hidden" class="hiddenidPhysicalLocation" value="{{k.idPhysicalLocation}}" />
</td>
<td class="lotNo">
<input type="hidden" class="hiddenLotNo" value="{{k.lotNo}}"/>
{{ k.lotNo }} <br>
{{k.grnNo}} ({{k.grnDate}}) <br>
{{k.inPermit}} {{k.physicalLocationName}}
</td>
<td class="lotQty">
<input type="hidden" class="hiddenLotQty" value="{{k.lotQty}}" />{{k.lotQty}}
</td>
<td class="cost"><input type="hidden" class="hiddencost" value="{{k.unitPrice}}" />{{ k.unitPrice | number:4}}
</td>
<td class="lotDetails" style=" line-height: 28px; ">
<span ng-repeat="c in k.lotDetails" ng-init="lotDetailsIndex = $index;">
<input type="hidden" class="hiddenLotDetails m-b-5" id="lotDetails{{parentIndex}}{{lotDataChildIndex}}{{lotDetailsIndex}}" value="{{c}}"/>{{c | ctnchange : c}}<br>
</span>
</td>
<td class="trxQty p-t-10 p-b-10">
<span ng-repeat="c in k.lotDetails track by $index" ng-init="trxQtyIndex = $index;">
<!-- lotDetailsValues Hidden field -->
<input type="hidden" class="lotDetailsValues"
id="lotDetailsValues{{parentIndex}}{{lotDataChildIndex}}{{trxQtyIndex}}"
ng-model="lotDetailsValues[parentIndex + '' + lotDataChildIndex + '' + $index]" ng-init="(lotDetailsValues[parentIndex + '' + lotDataChildIndex + '' + $index]) = k.lotDetailsValues[$index];"
value="{{k.lotDetailsValues[$index]}}" />
<!-- Transaction Quantity -->
<input class="trxQuantity m-b-5 text-right"
id="trx{{parentIndex}}{{lotDataChildIndex}}{{trxQtyIndex}}"
autocomplete="off"
ng-model="trx[parentIndex + '' + lotDataChildIndex + '' + trxQtyIndex]"
ng-keyup="calculateBalanceTxtQty(parentIndex,lotDataChildIndex,trxQtyIndex);
checkParentCheckbox($event,parentIndex,lotDataChildIndex);addTrxQty();"
style="width: 60px;" integers-only/><br>
</span>
</td>
<!-- BALANCE AMOUNT HIDDEN -->
<td class="balance p-t-10 p-b-10" ng-hide="true">
<span ng-repeat="c in k.lotDetails track by $index" ng-init="balanceIndex = $index;">
<input ng-disabled="true"
class="balanceAmt m-b-5"
id="balAmt{{parentIndex}}{{lotDataChildIndex}}{{balanceIndex}}"
type="text"
ng-model="balAmt[parentIndex + '' + lotDataChildIndex + '' + balanceNewIndex]"/><br>
</span>
</td>
<!-- BALANCE NEW AFTER CALCULATION -->
<td class="balanceNew p-t-10 p-b-10">
<span ng-repeat="c in k.lotDetails track by $index" ng-init="balanceNewIndex = $index;">
<input type="text" style="width: 60px;"
ng-model="balNew[parentIndex + '' + lotDataChildIndex + '' + balanceNewIndex]"
ng-disabled="true"
class="balanceNew m-b-5 text-right"
id="balNew{{parentIndex}}{{lotDataChildIndex}}{{balanceNewIndex}}"/>
<br>
</span>
</td>
</tr>
</tbody>
<tbody ng-repeat-end></tbody>
<tbody>
<tr ng-if="isDataLot=='no'" class="no_records"><td colspan="8">No Record(s) found.</td></tr>
<tr ng-if="isDataLot=='yes'" >
<td></td>
<td></td>
<td></td>
<td></td>
<td class="text-right">
<strong>Total:</strong>
</td>
<td class="text-right p-r-12">{{(addedTrxQty > 0) ? addedTrxQty : ''}}</td>
<td class="text-right p-r-12">{{(totalTrxValBal > 0) ? totalTrxValBal : ''}}</td>
</tr>
</tbody>
</table>
In order to get it in controller I used the following code:
var quantity = $scope.lotDetailsValues[parentIndex+ '' +childIndex+ '' +index];
If you are looking for Angular 7 version:
<div class="row" [ngClass]="index != 0 ? 'backgroundColor' : ''"
*ngFor="let t of edu.test_scores;trackBy: trackByItems;let si = index">
<!-- Test Score Value -->
<div class="col-md-3">
<div class="form-group">
<label class="alumni-label">Test Score</label>
<ng-select class="custom" name="test_scores_{{index}}_{{si}}" #test_scores[si]="ngModel" [(ngModel)]="t.id"
[items]="test_list" bindValue="id" placeholder="Select Score" bindLabel="name" notFoundText="No results found."
(change)="checkTest(index,$event)" (clear)="t.marks= null;t.marks_out_of=null;"></ng-select>
</div>
</div>
</div>
Related
Im having trouble getting data from a html table all the other tutorials have text inside the td tag but I have a textfield and a textarea which I want to get the value of
I have tried
<script>
$(document).ready(function() {
//click on table body
$(".rubric_table tbody tr").on("click", function() {
var tableData = $(this).children("td").map(function() {
return $.trim($(this).text());
}).get();
var td = tableData[0]+'*'+tableData[1]+'*'+tableData[2]+'*'+tableData[3]+'*'+tableData[4];
})
})
</script>
And this is my table
<table class="rubric_table" id="rubricTable">
<thead>
<tr class="header-row">
<th>
<span>Criteria</span>
</th>
<th class="grading_scale">
<span>Grading scale</span>
</th>
<th style="width: 60px;">
<span>Pts</span>
</th>
</tr>
<tbody></tbody>
<tbody>
<tr class="rubric_row">
<td class="rubric_row_title">
<div class="rubric_row_relative">
<input type="text" placeholder="Add Title" class="rubric_title no_border_input">
<div class="rubric_row_details">
<textarea placeholder="Add Description" style="overflow: hidden; height: 32px;" class="no_border_input_textarea"></textarea>
</div>
</div>
</td>
<td>
<table class="grading-table">
<tbody>
<tr>
<td class="grading-wrapper">
<div class="grading-item first_grading_item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rubric-row-pts">
<div class="rubric_points">
<input type="text" class="no_border_input" value="40">
</div>
</td>
</tr>
</tbody>
</thead>
</table>
I expected that my code would alert the values of the textfield and textarea but it doesn't.
Thanks
If you wan to get the values of the input, you can:
$(".rubric_table>tbody>tr") you have to use this selector in
adding click event. You have a table inside the table (I dont think
is ideal). To make sure you are only adding event on the direct tr
of .rubric_table
You have to loop thru each input of th and get their values.
$(".rubric_table>tbody>tr").on("click", function() {
var tableData = $(this).children("td").map(function() {
return $(this).find('input').map(function() {
return this.value;
}).get();
}).get();
console.log(tableData);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="rubric_table" id="rubricTable">
<thead>
<tr class="header-row">
<th>
<span>Criteria</span>
</th>
<th class="grading_scale">
<span>Grading scale</span>
</th>
<th style="width: 60px;">
<span>Pts</span>
</th>
</tr>
<tbody></tbody>
<tbody>
<tr class="rubric_row">
<td class="rubric_row_title">
<div class="rubric_row_relative">
<input type="text" placeholder="Add Title" class="rubric_title no_border_input">
<div class="rubric_row_details">
<textarea placeholder="Add Description" style="overflow: hidden; height: 32px;" class="no_border_input_textarea"></textarea>
</div>
</div>
</td>
<td>
<table class="grading-table">
<tbody>
<tr>
<td class="grading-wrapper">
<div class="grading-item first_grading_item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rubric-row-pts">
<div class="rubric_points">
<input type="text" class="no_border_input" value="40">
</div>
</td>
</tr>
</tbody>
</thead>
</table>
i'm made a table with and i'm trying to add a feature that allow user when scroll mouse down adds more rows but also to have fixed number of rows and vise verse correct when scroll up .
i'm using javascript angular
but now when i add information to field in a row and scroll down all information that was in the row disappear .
how could i when scroll down save the information .
my html code :
<table class="table table-bordered table-responsive col-md-11" ng-mouse-wheel-up="myscrollup()" ng-mouse-wheel-down="myscrolldown()" style="width: 95%">
<thead >
<tr context-menu="otherMenuOptions">
<th style="background-color: #00aba9" ng-style="colwidth[$index]" ng-repeat="h in head track by $index" >
<a style="color:#fff" href="#" ng-click="sortType = 'field{{$index}}'; sortReverse = !sortReverse">
{{h}}
<span ng-show="sortType == 'field{{$index}}' && !sortReverse" class="fa fa-angle-down"></span>
<span ng-show="sortType == 'field{{$index}}' && sortReverse" class="fa fa-angle-up"></span>
</a>
</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="i in getNumber(NOR) track by $index | filter : $index>=RSN">
<td > {{$index+1}}</td>
<td> <input ng-style="name[$index]" ng-model="test" type="" value=""> </td>
<td> <input type="text" value=""> </td>
<td> <input type="text" value=""> </td>
<td> <input type="text" value=""> </td>
<td> <input type="text" value=""> </td>
<td> <input type="date" value=""> </td>
</tr>
</tbody>
</table>
and my functions
$scope.myscrolldown=function(){
$scope.RSN++;
$scope.NOR++;
};
$scope.myscrollup=function(){
$scope.RSN--;
};
I am trying to do Sum on oninput method. Means as the button press the function will be called and show sum of two input in a paragraph <p> tag.
I have my javascript function like this:
quote:function(){
var button = document.getElementById('insert');
var table = document.getElementById('table');
$("#insert").click(function(){
var position=Math.round(table.rows.length - 3);
var row = table.insertRow(position);
var i=1;
row.innerHTML = '<td><input type="integer" name="qty[]" class="form-control" id="qty_' +position +'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discription[]" class="form-control"></td><td><input type="text" name="price[]" class="form-control" placeholder="0.00" id="price_'+ position+'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discount[]" class="form-control" placeholder="0.00"><td><input type="text" name="discountper[]" class="form-control" placeholder="0.00%"></td></td><td><p id="demo'+position+'"></p></td><td><input type="checkbox" name="taxed[]" class="form-control"></td> <td><a class="btn btn-circle red-haze btn-sm" href="javascript:void(0);" id="remCF"><i class="fa fa-times"></i></a></td>';
$("#remCF").live('click',function(){
$(this).parent().parent().remove();
});
});
},
After append it looks like this.
I would like to calculate Total Amount using quantity * price.
But i am not able to do that. It seems like Rows are appending fine. But when i try to call the function i am unable to specify the text are in the myFunction.
here is how myFuntion looks like:
function myFunction(place, event) {
var x =parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what QTY is clicked and which input is clicked -->
var y= parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what PRICE is clicked and which input is clicked -->
var z=x*y;
document.getElementById(place).innerHTML = z;
}
I would like to perform calculation row wise.
And if for reference if you want to know how my HTML looks then here is how it looks like.
<table class="table table-striped table-bordered table-hover" id="sample_3">
<thead>
<tr>
<th style="width:7%;">
Qty
</th>
<th style="width:50%;">
Description
</th>
<th style="width:10%;">
Unit Price
</th>
<th style="width:10%;">
Discount(Rs/$)
</th>
<th style="width:10%;">
Discount%
</th>
<th style="width:7%;">
Total
</th>
<th style="width:2%;">
Taxed
</th>
<th style="width:2%;">
Action
</th>
</tr>
</thead>
<tbody id="table">
<tr class="odd gradeX" id="p_scents" name="p_scnt">
<td>
<input type="integer" name="qty[]" class="form-control" value="1" id="myInput1" oninput="myFunction('demo', event)" >
</td>
<td>
<input type="text" name="discription[]" class="form-control">
</td>
<td>
<input type="text" name="price[]" class="form-control" placeholder="0.00" id="myInput2" oninput="myFunction('demo', event)">
</td>
<td>
<input type="text" name="discount[]" class="form-control" placeholder="0.00">
</td>
<td>
<input type="text" name="discountper[]" class="form-control" placeholder="0.00%">
</td>
<td>
<p id="demo"></p>
</td>
<td>
<div align="center"><input type="checkbox" name="taxed[]" class="form-control"></div>
</td>
<td></td>
</tr><!-- to add new column -->
<tr>
<td colspan="4" >
<div align="right">
<b>Sub Total:</b>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6" >
<a id="insert">Add a New Service</a><br>
<a id="ajax-demo" data-toggle="modal">
Predifined Services </a><td>
</tr>
</tbody>
</table>
here is the Jsfiddle link:
https://jsfiddle.net/5xaaneor/2/
Thank you!
When I select a drop down I want to hide specific rows in one table without the other one moving. How can I make the table fixed so it does not move once something is hidden? I am trying to add spacer on the bottom left table but it is still moving in Chrome/IE 10. Need it to work for both browsers.
Here is the fiddle: http://jsfiddle.net/xha4tb74/4/
I am calling the change of rows when the database field is selected.
onchange="database_details();"
Do you just want the table to stay aligned at the top? If so you can just set the valign attribute on the td.
Code below and updated fiddle here: http://jsfiddle.net/xha4tb74/6/
<body>
<form action="GenerateTDE" method="post" id="inputForm" class="pure-form h5-defaults pure-form-stacked">
<table align="center" style="width:1300px;">
<td valign="top">
<table>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">Database Details</span>
</th>
</tr>
<tr>
<th>* Database</th>
<th class="th_background">
<select id="database" class="form-control" name="database" onchange="database_details()">
<option value="oracle" selected="selected"><b>Oracle</b>
</option>
<option value="mssql"><b>Sql Server</b>
</option>
<option value="teraData"><b>TeraData</b>
</option>
<option value="epic"><b>Generic ODBC(Chronicles)</b>
</option>
<option value="sas"><b>SAS</b>
</option>
</select>
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"></th>
</tr>
<tr class="servicerow">
<th>* Service ID</th>
<th class="th_background">
<input type="text" id="sidText" name="sid" class="form-control" style="width: 100%" placeholder="Enter SID">
</th>
</tr>
<tr class="portrow">
<th>* Port</th>
<th class="th_background">
<input type="text" id="portText" name="port" class="form-control" style="width: 30%" value="1521" placeholder="Enter port">
</th>
</tr>
<tr class="dbNamerow">
<th>* DB Name</th>
<th class="th_background">
<input type="text" id="dbText" name="dbName" style="width: 100%" class="form-control" placeholder="Enter database name">
</th>
</tr>
<tr class="dbdnsrow">
<th>* DB DNS Name</th>
<th class="th_background">
<input type="text" id="dnsText" name="url" style="width: 100%" class="form-control" placeholder="Enter DNS">
</th>
</tr>
<tr class="librefsrow">
<th>* Lib Refs</th>
<th class="th_background">
<input type="text" id="librefs" name="librefs" style="width: 100%" class="form-control" placeholder="Enter Librefs">
</th>
</tr>
<tr class="hostrow">
<th>* Host</th>
<th class="th_background">
<input type="text" id="hostText" name="host" style="width: 100%" class="form-control" placeholder="Enter host Name">
</th>
</tr>
<tr class="userrow">
<th>* Database User</th>
<th class="th_background">
<input type="text" id="userText" name="user" style="width: 100%" class="form-control" placeholder="Enter user Name">
</th>
</tr>
<tr class="passwordrow">
<th>* Database Password</th>
<th class="th_background">
<input type="password" id="passwordText" style="width: 100%" name="password" class="form-control" placeholder="Enter database password">
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">* Name of TDE File</span><span data-toggle="tooltip" title="TDE Name should be unique for a site and project"><i class="fa fa-question-circle"></i></span>
</th>
</tr>
<tr>
<th>Enter new TDE Name
<br>Or
<br>Select from already existing TDEs</th>
<th class="th_background">
<input type="text" id="tdeNameText" onclick="resetTDENameDropdown();" onblur="validateTdeName();" name="tdeName" style="width: 100%" class="form-control" placeholder="Enter TDE Name">Or
<br>
<select id="tdeNameDropDown" class="form-control" name="tdeNameDropDown" onchange="clearTDEName();">
<label for="tdeNameDropDown"></label>
<option value="">---Select TDE Name---</option>
</select>
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;"></span>
</th>
</tr>
<tr>
<th>* Job Name <span data-toggle="tooltip" title="Job name should be unique for a user"><i class="fa fa-question-circle"></i></span>
</th>
<th class="th_background">
<input type="text" id="jobName" name="jobName" class="form-control" placeholder="Enter Job Name" style="width: 100%" required onblur="validateJobName();">
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;"><input type="checkbox"
name="scheduler" id="scheduler" value="yes"
onclick="hide_time();"> Schedule TDE Generation Job </span>
</th>
</tr>
<tr>
<th>* Schedule List</th>
<th class="th_background">
<select id="cronSchedule" class="form-control" name="cronSchedule" disabled>
<label for="cronSchedule"></label>
<option value="">---Select Schedule</option>
</select> <a href="/TableauDataExtractApp-1/scheduleMainPage.jsp">Create
Schedule</a>
</th>
</tr>
<tr id="filler" style="border-bottom: #d8d8d8 .1px solid;">
<th style="height: 49px;visibility: hidden;">filler</th>
</tr>
</table>
</td>
<td>
<table style="margin-top:6px !important;">
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">TDE Refresh Options</span>
</th>
</tr>
<tr>
<th class="th_background">
<input type="radio" name="refreshTde" value="yes" checked> <span data-toggle="tooltip" title="This option creates new TDE or replaces existing TDE file with full data.">Full
Refresh <i class="fa fa-question-circle"></i></span>
</th>
<th class="th_background">
<input type="radio" name="refreshTde" value="no"> <span data-toggle="tooltip" title="This option appends existing TDE. Should have same data items in the SQL.">Incremental
Refresh <i class="fa fa-question-circle"></i></span>
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">* SQL Query to Generate TDE</span>
</th>
</tr>
<tr>
<th class="th_background">
<input type="radio" id="query_upload" name="group1" onclick="sql_toggle();">Upload SQL File</th>
<th class="th_background">
<input type="radio" id="query_radio" name="group1" onclick="sql_toggle();">SQL Query</th>
</tr>
<tr class="uploadSQL">
<th class="th_background" colspan="2">
<input type="file" style="display: inline;" name="queryUpload" id="upload_querys">
<input type="button" onclick="formatSQL();" id="formatButton" value="Format SQL"></input>
</th>
</tr>
<tr class="textSQL">
<th colspan="2" style="background-color: #0072bc;">
<textarea rows="29" style="width: 100% !important;" id="query" placeholder="Enter query" name="query" required></textarea>
</th>
</tr>
</table>
</td>
</tr>
<tr style="
border-bottom: none;
">
<th colspan="4">
<center>
<input type="submit" class="pure-button pure-button-primary" value="Generate TDE">
<input type="button" value=" Reset " class="pure-button pure-button-primary" onclick="resets();">
</center>
</th>
</tr>
</table>
</form>
I am using AngularJS to show and retreive data from my users in HTML like:
<table id="app2" ng-app="categories" ng-cloak="" class="table table-hover" style="margin-top: 50px;">
<tr style="background-color:#4d748f; color:white;">
<th colspan="5" style="text-align:center; font-size:16px;">Add category</th>
</tr>
<tr>
<form novalidate>
<td colspan="4">
<input type="text" class="form-control" placeholder="Category name"></input>
</td>
<td colspan="1">
<input type="submit" class="btn btn-success"></input>
</td>
</form>
</tr>
<tr style="background-color:#4d748f; color:white;">
<th colspan="5" style="text-align:center; font-size:16px;">Add product</th>
</tr>
<tr>
<form ng-controller="category">
<td colspan="1">
<select class="form-control m-b-10">
<option ng-repeat= "c in categories">{{c[1]}}</option>
</select>
</td>
<td colspan="1">
<select class="form-control m-b-10">
<option>Antwerpen</option>
<option>Leuven</option>
</select>
</td>
<td colspan="1">
<input type="text" class="form-control" placeholder="Name"></input>
</td>
<td colspan="1">
<input type="text" class="form-control" placeholder="Price" width="10%"></input>
</td>
<td colspan="1">
<input type="submit" class="btn btn-success" ng-click="product()"></input>
</td>
</form>
</tr>
</table>
ANGULARJS
categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
var serviceBase = 'api/';
$http.get(serviceBase + 'categories').then(function (results) {
$scope.categories = results.data;
for(var i = 0; i < $scope.categories.length; i++){
var categories = $scope.categories[i];
}
$scope.product = function($scope, $http){
$http.post(serviceBase + 'productadd/'+$scope.catID+'/'+$scope.catID+'/'+$scope.pname+'/'+$scope.pprice).then(function(results){
alert('ok');
});
}
});
});
When I place my ng-controller on the select item to get the ng-repeat = c in categories. Then this works and I get the categories shown in my dropdown. But when I place it on the form tag it doesn't... I have to place it on my form tag because I want to add a product into my database after the user clicks the button to add products. And ng-click=product() gets called.
How can both of those functions function together?
You cannot wrap tr with you custom element except tbody, thead, table.. Simply used ng-form directive on tr which can be used as attribute
<tr ng-form name="myform" novalidate>
<td colspan="4">
<input type="text" class="form-control" placeholder="Category name"></input>
</td>
<td colspan="1">
<input type="submit" class="btn btn-success"></input>
</td>
</tr>