显示/隐藏<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