顯示/隱藏<tr>基於下拉列表中選擇 - angularjs

Question

我有在下面的objectsarray我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" 
    } 
]; 

這裏是我的dropdown系統會根據上述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> 

這是我想根據上面的下拉值顯示的行

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

我想顯示<tr>只有當我的下拉值更改爲'CustomReport'

FULL EXAMPLE

當我運行<tr>被顯示的HTML，並且只要我選擇的任何選項，它隱藏。我希望<tr>被默認隱藏，並且僅在我從下拉列表中選擇'CustomReport'值選項時才顯示。它應該隱藏在選擇任何其他選項。

Answer 1

除了你ngModel實際上是一個object，你有你的比較中使用單引號，如下：

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

DEMO