I have jquery table nested within Accordian but it doesnt seems to be working. Even the submit buttons are not displaying outside the accordian panel. I have tried looking into tabs view but issue still remain same. Looks like the conflict with jquery. Please help me in resolving this.Below is the code I am using.
`<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--This is Javascript to disable the address fields if user doesn't tick the checkbox-->
<script type="text/javascript">
$(document).ready(function(){
$('#sccb').click(function(){
if (this.checked) {
$('#cns').removeAttr("disabled");
$('#cns2').removeAttr("disabled");
$('#cns3').removeAttr("disabled");
$('#cns4').removeAttr("disabled");
$('#cns5').removeAttr("disabled");
$('#cns6').removeAttr("disabled");
$('#cns7').removeAttr("disabled");
} else {
$("#cns").attr("disabled", true);
$("#cns2").attr("disabled", true);
$("#cns3").attr("disabled", true);
$('#cns4').attr("disabled", true);
$('#cns5').attr("disabled", true);
$('#cns6').attr("disabled", true);
$('#cns7').attr("disabled", true);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#sccb1').click(function(){
if (this.checked) {
$('#cns8').removeAttr("disabled");
$('#cns9').removeAttr("disabled");
$('#cns10').removeAttr("disabled");
$('#cns11').removeAttr("disabled");
$('#cns12').removeAttr("disabled");
$('#cns13').removeAttr("disabled");
$('#cns14').removeAttr("disabled");
} else {
$("#cns8").attr("disabled", true);
$("#cns9").attr("disabled", true);
$("#cns10").attr("disabled", true);
$("#cns11").attr("disabled", true);
$("#cns12").attr("disabled", true);
$("#cns13").attr("disabled", true);
$("#cns14").attr("disabled", true);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#sccb2').click(function(){
if (this.checked) {
$('#cns15').removeAttr("disabled");
$('#cns16').removeAttr("disabled");
$('#cns17').removeAttr("disabled");
$('#cns18').removeAttr("disabled");
$('#cns19').removeAttr("disabled");
$('#cns20').removeAttr("disabled");
$('#cns21').removeAttr("disabled");
} else {
$("#cns15").attr("disabled", true);
$("#cns16").attr("disabled", true);
$("#cns17").attr("disabled", true);
$("#cns18").attr("disabled", true);
$("#cns19").attr("disabled", true);
$("#cns20").attr("disabled", true);
$("#cns21").attr("disabled", true);
}
});
});
</script>
<script>
jQuery(function($){
$( document ).ready(function() {
$( "select" ).change(function () {
var val = this.value;
if (val != 'select one') {
var tableRows = $("table tr");
jQuery.each(tableRows, function(i ,tr) {
if (i > val) {
$(tr).hide();
} else {
$(tr).show();
}
})
}
}
)
});
});
</script>
<style>
button.accordion {
background-color: #33CCFF;
color: #444;
cursor: pointer;
margin: 15px;
padding: 14px;
width: 1250px;
border: 2px;
text-align: left;
font-family: Comic Sans MS;
text-decoration: underline;
font-weight: bold;
outline: none;
font-size: 15px;
transition: 0.4s;
border:1px solid #ccc;
border-radius:5px;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\02795';
font-size: 14px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2796";
}
div.panel {
padding: 0 25px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 1500px;
}
tbody tr {
display: none;
}
</style>
</head>
<body>
<button class="accordion"><big>Guardian's Details</big></button>
<div id="foo" class="panel">
<fieldset>
<fieldset style="width: 1220px;">
<legend style="font-weight: bold; font-family: Comic Sans MS;text-decoration: underline;">Personal Details</legend>
<div style="width: 1230px;" class="form-group">
<big><label for="stugtitle">Title<span style="color: red;">*</span></label></big>
<select name="stugtitle" class="input" required>
<option value="">--select--</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
<big><label for="stugfname">Firstname<span style="color: red;">*</span></label></big>
<input size="15" name="stugfname" class="input" required>
<big><label for="stugmname">Middlename</label></big>
<input size="15" class="input" name="stugmname">
<big><label for="stugsname">Surname<span style="color: red;">*</span></label></big>
<input size="15" class="input" name="stugsname" required>
</div>
<br>
<big><label for="stuggender">Gender<span style="color: red;">*</span></label></big>
<select name="stuggender" class="input" required>
<option value="">--select--</option>
<option value="M">Male</option>
<option value="F">Female</option>
<option value="Mx">Mx</option>
</select>
<big><label for="stugdob">Birthdate<span style="color: red;">*</span></label></big>
<input size="15" name="stugdob" class="input" type="date" required>
<big><label for="stugmobile">Mobile<span style="color: red;">*</span></label></big>
<input size="15" class="input" name="stugmobile" required>
<big><label for="stugemail">Email<span style="color: red;">*</span></label></big>
<input size="19" class="input" name="stugemail" type="email" required>
</fieldset>
<br><br>
<fieldset>
<fieldset style="width: 1220px;">
<legend style="font-weight: bold; font-family: Comic Sans MS; text-decoration: underline;">Address Details</legend>
<div style="width: 1230px;" class="form-group">
<big><big><big><label for="stugaddress">Adress not same as applicant's address<span style="color: red;">*</span></label></big></big></big>
<input type="checkbox" id="sccb2" name="stugaddress" value="stugaddress">
(<span style="color: red; font-family: Comic Sans MS;"><span style="color: rgb(51, 51, 51);"></span><style="font-weight: bold;">Please tick the box to enter the details</span>)<br>
<br>
<big><label for="stugadd1">Address Line 1</label></big>
<input type="text" class="input" id="cns15" name="stugadd1" disabled="disabled"/>
<big><label for="stugadd2">Address Line 2</label></big>
<input type="text" class="input" id="cns16" name="stugadd2" disabled="disabled"/>
<big><label for="stugadd3">Address Line 3</label></big>
<input type="text" class="input" id="cns17" name="stugadd3" disabled="disabled" size="18"/>
<br>
<br>
<big><label for="stugcity">City</label></big>
<input size="15" class="input" type="text" id="cns18" name="stugcity" disabled="disabled"/>
<big><label for="stugstate">State</label></big>
<input size="15" class="input" type="text" id="cns19" name="stugstate" disabled="disabled"/>
<big><label for="stugcountry">Country</label></big>
<input size="15" class="input" type="text" id="cns20" name="stugcountry" disabled="disabled"/>
<big><label for="stugpincode">Pincode</label></big>
<input size="10" class="input" type="text" id="cns21" name="stugpincode" disabled="disabled"/> </div>
</fieldset>
<br style="font-family: Comic Sans MS;">
</div>
<button class="accordion"><big>Sibling's Details</big></button>
<div id="foo" class="panel">
<big style="font-family: Comic Sans MS;"><big>Select Number of Siblings<span style="color: red; font-weight: bold;">*</span></big></big><span style="font-family: Comic Sans MS;"> </span>
<select name="app_siblingno" class="input" required>
<option value = "">--select one--</option>
<option value = "0">0</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
<option value = "6">6</option>
</select>
<br>
<br>
<div>
<table style="text-align: centre; width: 500px;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="6" rowspan="1" style="vertical-align: top;">
</td>
</tr>
<tr>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">S.No 1</span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"> Name</span> <input name="app_siblingname1" class="input">
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"> Birthdate</span> <input name="app_siblingdob1" class="input" type="date">
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"> Class</span>
<select name="app_siblingclass1" class="input">
<option value = "">--select one--</option>
<option value = "12">XII</option>
<option value = "11">XI</option>
<option value = "10">X</option>
<option value = "9">IX</option>
<option value = "8">VIII</option>
<option value = "7">VII</option>
<option value = "6">VI</option>
<option value = "5">V</option>
<option value = "4">IV</option>
<option value = "3">III</option>
<option value = "2">II</option>
<option value = "1">I</option>
<option value = "KG">KG/Prep</option>
<option value = "Nur">Nursery</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"> Gender</span>
<select name="app_siblinggender1" class="input">
<option value = "">--select one--</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
<option value = "Mx">Mx</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"> School Name</span> <input name="app_schlname1" class="input">
</td>
</tr>
<tr>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">2</span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingname2" class="input"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingdob2" class="input" type="date"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><select name="app_siblingclass2" class="input"></span>
<option value = "">--select one--</option>
<option value = "12">XII</option>
<option value = "11">XI</option>
<option value = "10">X</option>
<option value = "9">IX</option>
<option value = "8">VIII</option>
<option value = "7">VII</option>
<option value = "6">VI</option>
<option value = "5">V</option>
<option value = "4">IV</option>
<option value = "3">III</option>
<option value = "2">II</option>
<option value = "1">I</option>
<option value = "KG">KG/Prep</option>
<option value = "Nur">Nursery</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><select name="app_siblinggender2" class="input"></span>
<option value = "">--select one--</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
<option value = "Mx">Mx</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingschlname2" class="input"></span>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">3</span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname3" class="input"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob3" class="input" type="date"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass3" class="input"></span>
<option value = "">--select one--</option>
<option value = "12">XII</option>
<option value = "11">XI</option>
<option value = "10">X</option>
<option value = "9">IX</option>
<option value = "8">VIII</option>
<option value = "7">VII</option>
<option value = "6">VI</option>
<option value = "5">V</option>
<option value = "4">IV</option>
<option value = "3">III</option>
<option value = "2">II</option>
<option value = "1">I</option>
<option value = "KG">KG/Prep</option>
<option value = "Nur">Nursery</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender3" class="input"></span>
<option value = "">--select one--</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
<option value = "Mx">Mx</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname3" class="input"></span>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">4</span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname4" class="input"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob4" class="input" type="date"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass4" class="input"></span>
<option value = "">--select one--</option>
<option value = "12">XII</option>
<option value = "11">XI</option>
<option value = "10">X</option>
<option value = "9">IX</option>
<option value = "8">VIII</option>
<option value = "7">VII</option>
<option value = "6">VI</option>
<option value = "5">V</option>
<option value = "4">IV</option>
<option value = "3">III</option>
<option value = "2">II</option>
<option value = "1">I</option>
<option value = "KG">KG/Prep</option>
<option value = "Nur">Nursery</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender4" class="input"></span>
<option value = "">--select one--</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
<option value = "Mx">Mx</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname4" class="input"></span>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">5</span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname5" class="input"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob5" class="input" type="date"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass5" class="input"></span>
<option value = "">--select one--</option>
<option value = "12">XII</option>
<option value = "11">XI</option>
<option value = "10">X</option>
<option value = "9">IX</option>
<option value = "8">VIII</option>
<option value = "7">VII</option>
<option value = "6">VI</option>
<option value = "5">V</option>
<option value = "4">IV</option>
<option value = "3">III</option>
<option value = "2">II</option>
<option value = "1">I</option>
<option value = "KG">KG/Prep</option>
<option value = "Nur">Nursery</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender5" class="input"></span>
<option value = "">--select one--</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
<option value = "Mx">Mx</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname5" class="input"></span>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">6</span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname6" class="input"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob6" class="input" type="date"></span>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass6" class="input"></span>
<option value = "">--select one--</option>
<option value = "12">XII</option>
<option value = "11">XI</option>
<option value = "10">X</option>
<option value = "9">IX</option>
<option value = "8">VIII</option>
<option value = "7">VII</option>
<option value = "6">VI</option>
<option value = "5">V</option>
<option value = "4">IV</option>
<option value = "3">III</option>
<option value = "2">II</option>
<option value = "1">I</option>
<option value = "KG">KG/Prep</option>
<option value = "Nur">Nursery</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender6" class="input"></span>
<option value = "">--select one--</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
<option value = "Mx">Mx</option>
</td>
<td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname6" class="input"></span>
</td>
</tr>
</tbody>
</div>
</div>
<button class="accordion"><big>Document Upload</big></button>
<div id="foo" class="panel">
<h1>upload document here<h1>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
<input id="app_submit1" class="button1" name="app_submit1" value="<<Back" type="submit"> <input class="button1" name="app_submit2" value="Save" type="submit"> <input class="button1" name="app_submit3" value="Submit" type="submit"> <input class="button1" name="app_cancel2" value="Cancel" type="reset"><br>
</body>
</html>
The table tag was missing in sibling details
Related
I'm working in Protractor and javasript. My page has multiple dropdowns of same class "tab-pane active ng-star-inserted". I want to select the 1st dropdown and click the option say "Raphael (BH681) - SVI" by passing the text as parameter.I want the different xpath and css to perform the select option.Can someone help me to select the text option from the 1st drop down?
<div role="tabpanel" class="tab-pane active ng-star-inserted" aria-labelledby="tab-stakeHolder" id="tab-stakeHolder-panel" aria-expanded="true">
<!---->
<!---->
<!----><app-workpackage-stakeholders-edit _ngcontent-c8="" _nghost-c13="" class="ng-star-inserted"><div _ngcontent-c13="" id="stakeholdersEditList">
<table _ngcontent-c13="">
<tbody _ngcontent-c13=""><tr _ngcontent-c13="">
<th _ngcontent-c13="">Role</th>
<th _ngcontent-c13="">Name</th>
</tr>
<!----><tr _ngcontent-c13="" class="ng-star-inserted">
<td _ngcontent-c13="">EWPL or TL</td>
<td _ngcontent-c13=""><i _ngcontent-c13="">Current :</i> <strong _ngcontent-c13="">QUINQUIS</strong>
<br _ngcontent-c13=""> <i _ngcontent-c13="">New : </i>
<select _ngcontent-c13="" class="form-control ng-valid ng-touched ng-dirty">
<!----><option _ngcontent-c13="" value="0: to12" class="ng-star-inserted">
JAMMES (to12) - ES2
</option><option _ngcontent-c13="" value="1: to44" class="ng-star-inserted">
Caroline (to44) - ES2D
</option><option _ngcontent-c13="" value="2: BH681" class="ng-star-inserted">
Raphael (BH681) - SVI
</option><option _ngcontent-c13="" value="3: MF04C" class="ng-star-inserted">
SOUHEL (MF04C) - HAHAF3
</option><option _ngcontent-c13="" value="4: GHJKU" class="ng-star-inserted">
BERRUE (GHJKU) - ES2D
</option>
</select>
</td>
<td _ngcontent-c13="">+44 561938567</td>
<td _ngcontent-c13="">quinquis#abcd.com</td>
<td _ngcontent-c13="">ES2D</td>
</tr><tr _ngcontent-c13="" class="ng-star-inserted">
<td _ngcontent-c13="">ES MFT Representative</td>
<td _ngcontent-c13=""><i _ngcontent-c13="">Current :</i> <strong _ngcontent-c13="">Fabien</strong>
<br _ngcontent-c13=""> <i _ngcontent-c13="">New : </i>
<select _ngcontent-c13="" class="form-control ng-pristine ng-valid ng-touched">
<!----><option _ngcontent-c13="" value="0: EUD9F" class="ng-star-inserted">
MUNOZ (EUD9F) - INNO
</option><option _ngcontent-c13="" value="1: GH678" class="ng-star-inserted">
Gaetub (GH678) - IDD
</option>
</select>
</td>
<td _ngcontent-c13="">+44 582053000</td>
<td _ngcontent-c13="">NMB#abcd.com</td>
<td _ngcontent-c13="">INNO</td>
</tr><tr _ngcontent-c13="" class="ng-star-inserted">
<td _ngcontent-c13="">MFT Leader</td>
<td _ngcontent-c13=""><i _ngcontent-c13="">Current :</i> <strong _ngcontent-c13="">GATNM</strong>
<br _ngcontent-c13=""> <i _ngcontent-c13="">New : </i>
<select _ngcontent-c13="" class="form-control ng-pristine ng-valid ng-touched">
<!----><option _ngcontent-c13="" value="0: AB5EDA2" class="ng-star-inserted">
Arthur (AB5EDA2) - ADC
</option><option _ngcontent-c13="" value="1: AB157FC" class="ng-star-inserted">
DESJARDINS (AB157FC) - ADC
</option>
</select>
</td>
<td _ngcontent-c13="">+44 561185000</td>
<td _ngcontent-c13="">GHF#abcd.com</td>
<td _ngcontent-c13="">ZIDDA</td>
</tr><tr _ngcontent-c13="" class="ng-star-inserted">
<td _ngcontent-c13="">S/C Manager</td>
<td _ngcontent-c13=""><i _ngcontent-c13="">Current :</i> <strong _ngcontent-c13="">BERTON</strong>
<br _ngcontent-c13=""> <i _ngcontent-c13="">New : </i>
<select _ngcontent-c13="" class="form-control ng-pristine ng-valid ng-touched">
<!----><option _ngcontent-c13="" value="0: FGHJ" class="ng-star-inserted">
BERTON (FGHJ) - IDCB
</option><option _ngcontent-c13="" value="1: AGHJ" class="ng-star-inserted">
MICHAUD (AGHJ) - IDD
</option>
</select>
</td>
<td _ngcontent-c13="">+44 561181980</td>
<td _ngcontent-c13="">berton#abcd.com</td>
<td _ngcontent-c13="">ZIDDA</td>
</tr>
</tbody></table>
<div _ngcontent-c13="" class="buttonTabSave">
<button _ngcontent-c13="" class="saveButton">
<span _ngcontent-c13="" class="fa fa-save"></span> Save New Stakeholders</button>
</div>
</div></app-workpackage-stakeholders-edit>
<app-supplier-stakeholders _ngcontent-c8="" _nghost-c14="" class="ng-star-inserted"><div _ngcontent-c14="" id="supplierStakeholdersList">
<table _ngcontent-c14="">
<tbody _ngcontent-c14=""><tr _ngcontent-c14="">
<th _ngcontent-c14="">Role</th>
<th _ngcontent-c14="">Name</th>
</tr>
<!----><tr _ngcontent-c14="" class="ng-star-inserted">
<td _ngcontent-c14="">DSCM</td>
<td _ngcontent-c14="">BVCD BRUNET</td>
<td _ngcontent-c14="">+44 56719156</td>
<td _ngcontent-c14="">BVCD.brunet#abcd.com</td>
<td _ngcontent-c14="">ES2D</td>
</tr><tr _ngcontent-c14="" class="ng-star-inserted">
<td _ngcontent-c14="">ES Key Supplier Representative</td>
<td _ngcontent-c14="">HGFD SCUOTTO</td>
<td _ngcontent-c14="">+44 5619356778</td>
<td _ngcontent-c14="">HGFD.scuotto.NMB#abcd.com</td>
<td _ngcontent-c14="">ZIDD</td>
</tr><tr _ngcontent-c14="" class="ng-star-inserted">
<td _ngcontent-c14="">QR or SRM</td>
<td _ngcontent-c14="">HHK BROUTIER</td>
<td _ngcontent-c14="">+44 56118456</td>
<td _ngcontent-c14="">HHK.NMB#abcd.com</td>
<td _ngcontent-c14="">ZIDD</td>
</tr><tr _ngcontent-c14="" class="ng-star-inserted">
<td _ngcontent-c14="">SCQM or Lead SOM</td>
<td _ngcontent-c14="">ROLLAND</td>
<td _ngcontent-c14="">+44 5671909567</td>
<td _ngcontent-c14="">rolland#abcd.com</td>
<td _ngcontent-c14="">ZIDDA</td>
</tr><tr _ngcontent-c14="" class="ng-star-inserted">
<td _ngcontent-c14="">Technical Authority Focal Point</td>
<td _ngcontent-c14="">Jean Pierre</td>
<td _ngcontent-c14="">+44 532110456</td>
<td _ngcontent-c14="">NMB#abcd.com</td>
<td _ngcontent-c14="">CMBA1</td>
</tr><tr _ngcontent-c14="" class="ng-star-inserted">
<td _ngcontent-c14="">TAM</td>
<td _ngcontent-c14="">Sandrine</td>
<td _ngcontent-c14="">00</td>
<td _ngcontent-c14="">charmarty.NMB#abcd.com</td>
<td _ngcontent-c14="">ESX</td>
</tr>
</tbody></table>
</div>
</app-supplier-stakeholders>
</div>
Seems like the dropdown also has id which has to be unique so maybe you should consider using id for identifying the dropdown:
var dropdown = element(by.id('tab-stakeHolder-panel'));
If identifying by class is preferred then you could select the 1st element that has this class with:
var dropdown = element.all(by.css('div.tab-pane.active.ng-star-inserted')).get(0);
For me selecting a dropdown option works best with sendKeys. Something like:
dropdown.click().sendKeys('Celine VINSONNEAU');
Try this xpath: //tr[2]/td[2]//option[contains(., 'Raphael (BH681) - SVI')]
Data display in table form. and i want to get siblings input value on dropdown onchange.
<tr ng-repeat="x in record">
<td>{{x.company }}</td>
<td>{{x.contact}}</td>
<td>
<input type='hidden' value="{{x.id}}">
<select name='status' >
<option value='1'>Active</option>
<option value='0'>Inactive</option>
</select>
</td>
</tr>
How can we get it.
angular.module('app', []).controller('ctrl', function($scope) {
$scope.record = [
{ company: 'Comp1', contact: 'Cont1', id: 1 },
{ company: 'Comp2', contact: 'Cont2', id: 2 }
]
$scope.process = function(input) {
console.log(input);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<table ng-app='app' ng-controller='ctrl'>
<tbody>
<tr ng-repeat="x in record">
<td>{{x.company }}</td>
<td>{{x.contact}}</td>
<td>
<input type='hidden' ng-model='x.id' />
<select name='status' ng-model='x.active' ng-change='process(x.id)'>
<option value='1'>Active</option>
<option value='0'>Inactive</option>
</select>
</td>
</tr>
</tbody>
</table>
I just tryout to project answer over your question. This might some different because of little description. So provide more code detail if this will not get work for you.
HTML
<tr ng-repeat="x in record">
<td>{{x.company }}</td>
<td>{{x.contact}}</td>
<td>
<input type='hidden' value="{{x.id}}" ng-model="hdnInput">
<select name='status' ng-model="status" ng-change="callMe($index)">
<option value='1'>Active</option>
<option value='0'>Inactive</option>
</select>
</td>
</tr>
Controller
$scope.callMe = function(index){
console.log(this.hdnInput[index]);
}
In bootstrap how to use comboBox with multiple checkbox option as in the attached image.
I used multiple checkbox option in dropdown list as below, but i do not wish drop down list with checkbox, instead wish to have like the image attached.
<select multiple="multiple"> .... </select>
From the below way i got the solution
<table>
<tr>
<td>
<div
style="max-height: 350px; overflow-y: scroll; width: 375px;background: white;"
class="scrollbar style-2">
<table class="table">
<thead align="center">
<tr>
<th style="text-align: center;background: #5cb85c;color : white;">List</th>
<th style="background: white;background: #5cb85c;color : white;"></th>
</tr>
</thead>
<tbody style="background: white;">
<%
for (int i = 0; i < 10; i++) {
%>
<tr style="border: 0">
<td style="border: 0">
<div class="[ form-group ]">
<input type="checkbox" name="fancy-checkbox-default_p3_ii<%=i%>"
id="fancy-checkbox-default_p3_ii<%=i%>" autocomplete="off" />
<div class="[ btn-group ]">
<label for="fancy-checkbox-default_p3_ii<%=i%>"
class="[ btn btn-success ]" style="top: 5px;"> <span
class="[ glyphicon glyphicon-ok ]"></span> <span> </span>
</label> <label for="fancy-checkbox-default_p3_ii<%=i%>"
class="[ btnCustom active ]"> Default Checkbox<%=i%>
</label>
</div>
</div>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</td>
</tr>
</table>
I am building an application with AngularJS, and I am facing problems with the firefox. I think it's because I use multiple ng-repeat inside others ng-repeat, I have already tried almost all what I found in stackoverflow and forums.
I have a big table with multiple loops, this is what the table looks like :
<table class="booking-table table table-condensed mergeCells"
id="booking-table" ng-if="bookingSelected.accounts.length != 0">
<thead>
<tr>
<th colspan="10" class="transparent separator"></th>
<th colspan="2" style="border-top: 1px solid #000 !important;">OPPORTUNITY
DEFINITION</th>
<td class="separator"></td>
</tr>
<tr>
<th colspan="2">REGION</th>
<th>COUNTRY</th>
<th>MARKETS</th>
<th>SERVICE</th>
<th>TYPE</th>
<th>CUSTOMER</th>
<th>BDO Ref</th>
<th style="width: 100px !important;">Probability %</th>
<th style="width: 110px !important;">Booking Revenue</th>
<th class="gray" style="width: 10px !important;">Nb</th>
<th class="gray" style="width: 221px !important;">Name</th>
<th class="separator"></th>
<th class="transparent po-info left"
style="text-align: center;">PO Number</th>
<th class="transparent po-info left"
style="width: 80px !important; text-align: center;"
colspan="2">PO Amount</th>
</tr>
</thead>
<tbody bindonce
ng-repeat="account in bookingSelected.accounts track by account.id">
<!-- Booking line -->
<tr class="gray">
<td rowspan="2" colspan="10" class="separator"><span
class="remove-opp button-hover" ng-if="isNotReadOnlyAdmin()"
ng-click="addOpportunity(account)"><i
class="fa fa-plus"></i> Add</span><span
class="remove-opp button-hover readOnlyButtons"
ng-if="isReadOnlyAdmin()"><i class="fa fa-plus"></i>
Add</span> <span class="remove-opp button-hover"
ng-if="account.id == null && currentUser.isAdministrator"
ng-click="removeAccount(account)"><i
class="fa fa-times"></i> Remove Account</span></td>
<td colspan="2">BOOKING GOALS</td>
<td rowspan="2" class="separator"></td>
<td class="po-info"></td>
<td class="transparent right po-info input number" colspan="2">
<input ng-model-options="{ debounce: 600 }"
ng-model="account.bookingGoals" class="input-number"
ng-change="totalAccountOpportunity(account)"></input> <span
class="suffix">€</span>
</td>
</tr>
<tr class="gray">
<td colspan="2" class="transparent text-red">REMAINING
BOOKING GOALS proba weight</td>
<td class="po-info"></td>
<td class="transparent right po-info input"
ng-class="{'text-red' : account.remaining > 0, 'text-green' : account.remaining <= 0}"
colspan="2">
<div>
<span> {{ account.remaining | number }} € </span>
</div>
</td>
</tr>
<!-- Account -->
<tr class="orange" bindonce
ng-repeat-start="opportunity in account.opportunities track by opportunity.id">
<td class="remove-opp" ng-if="showRemoveButton(opportunity)"
ng-click="removeOpportunity(account, opportunity)">
<center>
<i class="fa fa-times"></i>
</center>
</td>
<td class="center input" ng-click="makeRowActive(null)"
ng-if="showRemoveButton(opportunity)"><input
ng-model-options="{ debounce: 600 }" uib-popover="REGION"
popover-trigger="'focus'" type="text" ng-model="account.title"></td>
<td class="center input" colspan="2"
ng-click="makeRowActive(null)"
ng-if="!showRemoveButton(opportunity)"><input
ng-model-options="{ debounce: 600 }" uib-popover="REGION"
popover-trigger="'focus'" type="text" ng-model="account.title"></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="COUNTRY" popover-trigger="'focus'"
ng-model="opportunity.country"
ng-options="country as country.libelle for country in countries track by country.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="MARKET" popover-trigger="'focus'"
ng-model="opportunity.market"
ng-options="market as market.libelle for market in markets track by market.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="SERVICE" popover-trigger="'focus'"
ng-model="opportunity.service"
ng-options="service as service.libelle for service in services track by service.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="TYPE" popover-trigger="'focus'"
ng-model="opportunity.type"
ng-options="type as type.libelle for type in types track by type.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="CUSTOMER" popover-trigger="'focus'"
ng-model="opportunity.client"
ng-options="customer as customer.raisonSociale for customer in customers track by customer.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)">{{
opportunity.bdoNumber }}</td>
<td class="right input"
ng-class="{'green' : opportunity.probability.value >= 90, 'orange' : opportunity.probability.value == 60, 'red' : opportunity.probability.value == 30, 'gray' : opportunity.probability.value < 30}"
ng-click="makeRowActive(null)"><select
uib-popover="Probability %" popover-trigger="'focus'"
ng-model="opportunity.probability"
ng-change="updatePoAmmountOpportunity(account, opportunity)"
ng-options="probability as probability.libelle for probability in probabilities track by probability.id">
</select></td>
<td class="right input" ng-click="makeRowActive(null)">
<div ng-if="showPoAmmount(opportunity)">
<span> {{ opportunity.poAmmount | number }} € </span>
</div>
</td>
<td class="input" ng-click="makeRowActive(null)"
style="width: 30px;"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="Nb" popover-trigger="'focus'"
ng-model="opportunity.nb"></td>
<td class="input" ng-click="makeRowActive(null)"
style="width: 300px !important;"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="OPPORTUNITY DEFINITION" popover-trigger="'focus'"
ng-model="opportunity.definition"></td>
<td class="separator"></td>
<td class="center po-info input" ng-click="makeRowActive(null)">
<input ng-model-options="{ debounce: 600 }" type="text"
ng-model="opportunity.revenue" uib-popover="REVENUE"
popover-trigger="'focus'" class="input-number"
ng-change="updatePoAmmountOpportunity(account, opportunity)">
</td>
<td class="right po-info input" ng-click="makeRowActive(null)">
<div ng-if="showPoAmmount(opportunity)">
<span> {{ opportunity.poAmmount | number }} € </span>
</div>
</td>
<td class="remove-opp" title="Add opportunity"
ng-if="isNotReadOnly()"
ng-click="addOpportunityChildren(opportunity)">
<center>
<i class="fa fa-plus"></i> Add
</center>
</td>
<td class="remove-opp readOnlyButtons"
title="Add opportunity (disabled)" ng-if="isReadOnly()">
<center>
<i class="fa fa-plus"></i> Add
</center>
</td>
</tr>
<!-- Opportunities -->
<tr bindonce
ng-repeat="opp in opportunity.opportunities track by opp.id"
ng-class="{'active' : opp == activeOpp}">
<td class="center input rowSpan" colspan="2"
test="{{ account.title }}" ng-click="makeRowActive(opp)">
{{ account.title }}</td>
<td class="input" ng-click="makeRowActive(null)"><select
ng-model="opp.country" uib-popover="COUNTRY"
popover-trigger="'focus'"
ng-options="country as country.libelle for country in countries track by country.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="MARKET" popover-trigger="'focus'"
ng-model="opp.market"
ng-options="market as market.libelle for market in markets track by market.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="SERVICE" popover-trigger="'focus'"
ng-model="opp.service"
ng-options="service as service.libelle for service in services track by service.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="TYPE" popover-trigger="'focus'"
ng-model="opp.type"
ng-options="type as type.libelle for type in types track by type.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="CUSTOMER" popover-trigger="'focus'"
ng-model="opp.client"
ng-options="customer as customer.raisonSociale for customer in customers track by customer.id">
</select></td>
<td class="input" style="padding-left: 5px !important;"
ng-class="{'redB' : opp.bdoNumber == null || opp.bdoNumber == ''}"
ng-click="makeRowActive(opp)">{{ opp.bdoNumber }}</td>
<td class="right input"
ng-class="{'green' : opp.probability.value >= 90, 'orange' : opp.probability.value == 60, 'red' : opp.probability.value == 30, 'gray' : opp.probability.value < 30}"
ng-click="makeRowActive(opp)"><select
uib-popover="Probability %" popover-trigger="'focus'"
ng-model="opp.probability"
ng-change="updatePoAmmountOpportunityChild(opp, account)"
ng-options="probability as probability.libelle for probability in probabilities track by probability.id">
</select></td>
<td class="right input" ng-click="makeRowActive(opp)">
<div>
<span> {{ opp.poAmmount | number }} € </span>
</div>
</td>
<td style="width: 30px;" class="input"
ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="Nb" popover-trigger="'focus'" uib-popover="Nb"
popover-trigger="'focus'" ng-model="opp.nb"></td>
<td class="input" ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }"
uib-popover="OPPORTUNITY DEFINITION" popover-trigger="'focus'"
type="text" ng-model="opp.definition"></td>
<td class="separator"></td>
<td class="center po-info input" ng-click="makeRowActive(opp)">
<input ng-model-options="{ debounce: 600 }" type="text"
ng-model="opp.po" uib-popover="PO Number"
popover-trigger="'focus'">
</td>
<td class="right po-info input number"
ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }" uib-popover="PO Amount"
popover-trigger="'focus'" ng-model="opp.poAmmount"
class="input-number"
ng-change="updatePoAmmountOpportunityChild(opp, account)"></input>
<span class="suffix">€</span></td>
<td ng-if="isNotReadOnly()"><i
class="fa fa-chevron-up remove-opp" title="Move up"
ng-click="opportunityToUp(opportunity, opp)"></i> <i
class="fa fa-chevron-down remove-opp" title="Move down"
ng-click="opportunityToDown(opportunity, opp)"></i> <i
class="fa fa-times remove-opp" title="Remove opportunity"
ng-if="showRemoveButton(opp)"
ng-click="removeOpportunityChildren(opportunity, opp, account)"></i>
<i class="fa fa-clone remove-opp"
title="Duplicate opportunity"
ng-click="duplicateOpportunityChildren(opportunity, opp)"></i>
<i class="fa fa-eye remove-opp" title="Show history"
ng-click="showHistory(account, opportunity, opp)"
data-toggle="modal" data-target="#opportunityHistory"></i></td>
<td ng-if="isReadOnly()" class="readOnlyButtons"><i
class="fa fa-chevron-up remove-opp" title="Move up (disabled)"></i>
<i class="fa fa-chevron-down remove-opp"
title="Move down (disabled)"></i> <i
class="fa fa-times remove-opp"
title="Remove opportunity (disabled)"></i> <i
class="fa fa-clone remove-opp"
title="Duplicate opportunity (disabled)"></i> <i
class="fa fa-eye remove-opp" title="Show history (disabled)"></i></td>
</tr>
<!-- Total -->
<tr class="total" ng-if="$last">
<td colspan="10" class="separator"></td>
<td colspan="2">TOTAL {{ account.title }}</td>
<td class="separator"></td>
<td></td>
<td class="center" colspan="2">
<div>
<span> {{ opportunity.total }} € </span>
</div>
</td>
</tr>
<tr ng-if="($index + 1) < bookingSelected.accounts.length"
ng-repeat-end>
<td colspan="16"
style="height: 10px !important; border: none !important; background: #fff !important;"></td>
</tr>
</tbody>
<tr class="separator"></tr>
<tr class="total">
<td colspan="12">TOTAL SUM</td>
<td class="separator"></td>
<td class="total-sum"></td>
<td class="center total-sum" colspan="2">
<div>
<span> {{ totalBooking | number }} € </span>
</div>
</td>
</tr>
</table>
I am using now the bindonce module.
In Google Chrome I have no problems with the performance, it's only in Mozilla firefox (I tried multiple version of this browser, all have the same issue).
Bellow is a snapshot of the firefox performance tool :
UPDATED
<table class="booking-table table table-condensed mergeCells"
id="booking-table" ng-if="::bookingSelected.accounts.length">
<thead>
<tr>
<th colspan="10" class="transparent separator"></th>
<th colspan="2" style="border-top: 1px solid #000 !important;">OPPORTUNITY
DEFINITION</th>
<td class="separator"></td>
</tr>
<tr>
<th colspan="2">REGION</th>
<th>COUNTRY</th>
<th>MARKETS</th>
<th>SERVICE</th>
<th>TYPE</th>
<th>CUSTOMER</th>
<th>BDO Ref</th>
<th style="width: 100px !important;">Probability %</th>
<th style="width: 110px !important;">Booking Revenue</th>
<th class="gray" style="width: 10px !important;">Nb</th>
<th class="gray" style="width: 221px !important;">Name</th>
<th class="separator"></th>
<th class="transparent po-info left"
style="text-align: center;">PO Number</th>
<th class="transparent po-info left"
style="width: 80px !important; text-align: center;"
colspan="2">PO Amount</th>
</tr>
</thead>
<tbody bindonce
ng-repeat="account in bookingSelected.accounts track by $index">
<!-- Booking line -->
<tr class="gray">
<td rowspan="2" colspan="10" class="separator"><span
class="remove-opp button-hover" ng-if="isNotReadOnlyAdmin()"
ng-click="addOpportunity(account)"><i
class="fa fa-plus"></i> Add</span><span
class="remove-opp button-hover readOnlyButtons"
ng-if="isReadOnlyAdmin()"><i class="fa fa-plus"></i>
Add</span> <span class="remove-opp button-hover"
ng-if="account.id == null && currentUser.isAdministrator"
ng-click="removeAccount(account)"><i
class="fa fa-times"></i> Remove Account</span></td>
<td colspan="2">BOOKING GOALS</td>
<td rowspan="2" class="separator"></td>
<td class="po-info"></td>
<td class="transparent right po-info input number" colspan="2">
<input ng-model-options="{ debounce: 600 }"
ng-model="::account.bookingGoals" class="input-number"
ng-change="::totalAccountOpportunity(account)"></input> <span
class="suffix">€</span>
</td>
</tr>
<tr class="gray">
<td colspan="2" class="transparent text-red">REMAINING
BOOKING GOALS proba weight</td>
<td class="po-info"></td>
<td class="transparent right po-info input"
ng-class="{'text-red' : account.remaining > 0, 'text-green' : account.remaining <= 0}"
colspan="2">
<div>
<span> {{ ::(account.remaining | number) }} € </span>
</div>
</td>
</tr>
<!-- Account -->
<tr class="orange" bindonce
ng-repeat-start="opportunity in account.opportunities track by $index">
<td class="remove-opp" ng-if="::showRemoveButton(opportunity)"
ng-click="removeOpportunity(account, opportunity)">
<center>
<i class="fa fa-times"></i>
</center>
</td>
<td class="center input" ng-click="makeRowActive(null)"
ng-if="::showRemoveButton(opportunity)"><input
ng-model-options="{ debounce: 600 }" uib-popover="REGION"
popover-trigger="'focus'" type="text"
ng-model="::account.title"></td>
<td class="center input" colspan="2"
ng-click="makeRowActive(null)"
ng-if="::(!showRemoveButton(opportunity))"><input
ng-model-options="{ debounce: 600 }" uib-popover="REGION"
popover-trigger="'focus'" type="text"
ng-model="::account.title"></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="COUNTRY" popover-trigger="'focus'"
ng-model="::opportunity.country"
ng-options="country as country.libelle for country in countries track by country.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="MARKET" popover-trigger="'focus'"
ng-model="::opportunity.market"
ng-options="market as market.libelle for market in markets track by market.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="SERVICE" popover-trigger="'focus'"
ng-model="::opportunity.service"
ng-options="service as service.libelle for service in services track by service.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="TYPE" popover-trigger="'focus'"
ng-model="::opportunity.type"
ng-options="type as type.libelle for type in types track by type.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="CUSTOMER" popover-trigger="'focus'"
ng-model="::opportunity.client"
ng-options="customer as customer.raisonSociale for customer in customers track by customer.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)">{{
::opportunity.bdoNumber }}</td>
<td class="right input"
ng-class="{'green' : opportunity.probability.value >= 90, 'orange' : opportunity.probability.value == 60, 'red' : opportunity.probability.value == 30, 'gray' : opportunity.probability.value < 30}"
ng-click="makeRowActive(null)"><select
uib-popover="Probability %" popover-trigger="'focus'"
ng-model="::opportunity.probability"
ng-change="updatePoAmmountOpportunity(account, opportunity)"
ng-options="probability as probability.libelle for probability in probabilities track by probability.id">
</select></td>
<td class="right input" ng-click="makeRowActive(null)">
<div ng-if="::showPoAmmount(opportunity)">
<span> {{ ::(opportunity.poAmmount | number) }} € </span>
</div>
</td>
<td class="input" ng-click="makeRowActive(null)"
style="width: 30px;"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="Nb" popover-trigger="'focus'"
ng-model="::opportunity.nb"></td>
<td class="input" ng-click="makeRowActive(null)"
style="width: 300px !important;"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="OPPORTUNITY DEFINITION" popover-trigger="'focus'"
ng-model="::opportunity.definition"></td>
<td class="separator"></td>
<td class="center po-info input" ng-click="makeRowActive(null)">
<input ng-model-options="{ debounce: 600 }" type="text"
ng-model="::opportunity.revenue" uib-popover="REVENUE"
popover-trigger="'focus'" class="input-number"
ng-change="updatePoAmmountOpportunity(account, opportunity)">
</td>
<td class="right po-info input" ng-click="makeRowActive(null)">
<div ng-if="::showPoAmmount(opportunity)">
<span> {{ opportunity.poAmmount | number }} € </span>
</div>
</td>
<td class="remove-opp" title="Add opportunity"
ng-if="::isNotReadOnly()"
ng-click="addOpportunityChildren(opportunity)">
<center>
<i class="fa fa-plus"></i> Add
</center>
</td>
<td class="remove-opp readOnlyButtons"
title="Add opportunity (disabled)" ng-if="::isReadOnly()">
<center>
<i class="fa fa-plus"></i> Add
</center>
</td>
</tr>
<!-- Opportunities -->
<tr bindonce
ng-repeat="opp in opportunity.opportunities track by $index"
ng-class="{'active' : opp == activeOpp}">
<td class="center input" colspan="2"
ng-click="makeRowActive(opp)">{{ ::account.title }}</td>
<td class="input" ng-click="makeRowActive(null)"><select
ng-model="::opp.country" uib-popover="COUNTRY"
popover-trigger="'focus'"
ng-options="country as country.libelle for country in countries track by country.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="MARKET" popover-trigger="'focus'"
ng-model="::opp.market"
ng-options="market as market.libelle for market in markets track by market.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="SERVICE" popover-trigger="'focus'"
ng-model="::opp.service"
ng-options="service as service.libelle for service in services track by service.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="TYPE" popover-trigger="'focus'"
ng-model="::opp.type"
ng-options="type as type.libelle for type in types track by type.id">
</select></td>
<td class="input" ng-click="makeRowActive(null)"><select
uib-popover="CUSTOMER" popover-trigger="'focus'"
ng-model="::opp.client"
ng-options="customer as customer.raisonSociale for customer in customers track by customer.id">
</select></td>
<td class="input" style="padding-left: 5px !important;"
ng-class="{'redB' : opp.bdoNumber == null || opp.bdoNumber == ''}"
ng-click="makeRowActive(opp)">{{ opp.bdoNumber }}</td>
<td class="right input"
ng-class="{'green' : opp.probability.value >= 90, 'orange' : opp.probability.value == 60, 'red' : opp.probability.value == 30, 'gray' : opp.probability.value < 30}"
ng-click="makeRowActive(opp)"><select
uib-popover="Probability %" popover-trigger="'focus'"
ng-model="::opp.probability"
ng-change="updatePoAmmountOpportunityChild(opp, account)"
ng-options="probability as probability.libelle for probability in probabilities track by probability.id">
</select></td>
<td class="right input" ng-click="makeRowActive(opp)">
<div>
<span> {{ opp.poAmmount | number }} € </span>
</div>
</td>
<td style="width: 30px;" class="input"
ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }" type="text"
uib-popover="Nb" popover-trigger="'focus'" uib-popover="Nb"
popover-trigger="'focus'" ng-model="::opp.nb"></td>
<td class="input" ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }"
uib-popover="OPPORTUNITY DEFINITION" popover-trigger="'focus'"
type="text" ng-model="::opp.definition"></td>
<td class="separator"></td>
<td class="center po-info input" ng-click="makeRowActive(opp)">
<input ng-model-options="{ debounce: 600 }" type="text"
ng-model="::opp.po" uib-popover="PO Number"
popover-trigger="'focus'">
</td>
<td class="right po-info input number"
ng-click="makeRowActive(opp)"><input
ng-model-options="{ debounce: 600 }" uib-popover="PO Amount"
popover-trigger="'focus'" ng-model="::opp.poAmmount"
class="input-number"
ng-change="updatePoAmmountOpportunityChild(opp, account)"></input>
<span class="suffix">€</span></td>
<td ng-if="::isNotReadOnly()"><i
class="fa fa-chevron-up remove-opp" title="Move up"
ng-click="opportunityToUp(opportunity, opp)"></i> <i
class="fa fa-chevron-down remove-opp" title="Move down"
ng-click="opportunityToDown(opportunity, opp)"></i> <i
class="fa fa-times remove-opp" title="Remove opportunity"
ng-if="::showRemoveButton(opp)"
ng-click="removeOpportunityChildren(opportunity, opp, account)"></i>
<i class="fa fa-clone remove-opp"
title="Duplicate opportunity"
ng-click="duplicateOpportunityChildren(opportunity, opp)"></i>
<i class="fa fa-eye remove-opp" title="Show history"
ng-click="showHistory(account, opportunity, opp)"
data-toggle="modal" data-target="#opportunityHistory"></i></td>
<td ng-if="::isReadOnly()" class="readOnlyButtons"><i
class="fa fa-chevron-up remove-opp" title="Move up (disabled)"></i>
<i class="fa fa-chevron-down remove-opp"
title="Move down (disabled)"></i> <i
class="fa fa-times remove-opp"
title="Remove opportunity (disabled)"></i> <i
class="fa fa-clone remove-opp"
title="Duplicate opportunity (disabled)"></i> <i
class="fa fa-eye remove-opp" title="Show history (disabled)"></i></td>
</tr>
<!-- Total -->
<tr class="total" ng-if="::$last">
<td colspan="10" class="separator"></td>
<td colspan="2">TOTAL {{ account.title }}</td>
<td class="separator"></td>
<td></td>
<td class="center" colspan="2">
<div>
<span> {{ opportunity.total }} € </span>
</div>
</td>
</tr>
<tr ng-if="::(($index + 1) < bookingSelected.accounts.length)"
ng-repeat-end>
<td colspan="16"
style="height: 10px !important; border: none !important; background: #fff !important;"></td>
</tr>
</tbody>
<tr class="separator"></tr>
<tr class="total">
<td colspan="12">TOTAL SUM</td>
<td class="separator"></td>
<td class="total-sum"></td>
<td class="center total-sum" colspan="2">
<div>
<span> {{ ::(totalBooking | number) }} € </span>
</div>
</td>
</tr>
</table>
try to use this in all app:
{{ ::(opportunity.poAmmount | number) }}
function in ng-if and bg-class is a pure evil
ng-if="::showRemoveButton(opportunity)"
refactor ng-if="bookingSelected.accounts.length != 0" => ng-if="::bookingSelected.accounts.length"
but remember that bind-once inside ng-if is very fragile/ you should return undefiend from function if data do not get yet from server
Here why span is not showing binding values.Here my intenssion is my span has to work as label
<div ng-controller="MydrpCntrl">
<form>
<select class="form-control" ng-options="I.EmployeeId as I.EmployeeId for I in EmployeeList" ng-model="EmployeeId" ng-change="GetEmployees()">
<option value="">Select Employee Id</option>
</select>
<span ng-repeat="eee in Emp"> </span>
<br /><br />
<table class="table" style="margin-left:20px">
<tr>
<th style="cursor:pointer"<b>Employee Name</b></th>
</tr>
<tr ng-repeat="eee in Emp">
<td>
{{eee.EmployeeeName}}
</td>
</tr>
</table> </form>
</div>
Try this:
<span ng-repeat="eee in Emp">{{eee.Name}} </span>