显示/隐藏基于下拉选择 - angularjs

时间:2016-07-31 19:16:47

标签: javascript angularjs

我的array中有以下objects 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

当我运行html时,显示<tr>,一旦我选择了任何选项,它就会隐藏。我希望隐藏<tr>按DEFAULT并仅在我从下拉列表中选择'CustomReport'值选项时显示。它应该隐藏在选择任何其他选项上。

1 个答案:

答案 0 :(得分:1)

除了ngModel实际上是object之外,您还必须在比较中使用单引号,如下所示:

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

DEMO