Nishant123 Nishant123 - 4 months ago 13
Javascript Question

Show/Hide <tr> based on dropdown select - angularjs

I have the following array of objects in my controller

$scope.reportsValuesOptions = [
{
value:'Cash Position Report',
option:'Cash Position Report'
},
{
value:'Detail Report',
option:'Detail Report'
},
{
value:'Reconciliation Report',
option:'Reconciliation Report'
},
{
value:'Summary Report',
option:'Summary Report'
},
{
value:'Sweep Report',
option:'Sweep Report'
},
{
value:'FCCS/FBPS Detail Report',
option:'FCCS/FBPS Detail Report'
},
{
value:'CustomReport',
option:'Custom Report Name'
}
];


I want to show a
<tr>
only if my dropdown value changes to
'CustomReport'


Here is my dropdown which gets populated based on the above array

<select name="rname" id="rname" ng-model="rname" ng-options="report.option for report in reportsValuesOptions track by report.value">
<option value="">---Select---</option>
</select>


Here is the row which I want to show based on above dropdown value

<tr ng-if="rname === CustomReport">
<td class="label-cell">* Custom account Number(s) :</td>
<td>
<input type="text" id="custaccountNumber" name="custaccountNumber" ng-model="custaccountNumber" />
</td>
</tr>


FULL EXAMPLE

When I run the html the
<tr>
gets displayed, and as soon as I select ANY option, it hides. I want the
<tr>
to be hidden BY DEFAULT and show ONLY WHEN I select
'CustomReport'
value option from the dropdown. It should hide on selecting any other option.

Answer

In addition to your ngModel actually be an object, you have to use single quotes in your comparison, as below:

<tr ng-if="rname.value === 'CustomReport'">

DEMO