Nishant123 Nishant123 - 2 months ago 11x
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'
option:'Custom Report Name'

I want to show a
only if my dropdown value changes to

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>

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>
<input type="text" id="custaccountNumber" name="custaccountNumber" ng-model="custaccountNumber" />


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


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'">