显示隐藏 <tr> 基于MULTIPLE <select>盒子-angularjs

Question

I have a multiple select box as follows

<select multiple name="transActionGroup" id="transActionGroup" ng-multiple="true" ng-model="transActionGroup" title="Hold CTRL to select more than one transaction type.">
    <option value="None">None</option>
    <option value="Custom Group">Custom Group</option>
    <option value="ACH Credits">ACH Credits</option>
    <option value="ACH Debits">ACH Debits</option>
</select>

I want to show a <tr> , which is hidden by default, when the user selects 'Custom Group' as one of his options from the above select box

This is my <tr>

<tr id="custTransGrp" ng-if="transActionGroup === 'Custom Group'">
    <td class="label-cell"> * Custom Group(s) : </td>
    <td>
        <input type="text" ng-model="customTransActionGroup" name="customTransActionGroup" id="customTransActionGroup" />
    </td>
</tr>

I tried

ng-if="transActionGroup === 'Custom Group'"

but it didn't work

Answer 1

Actually your ngModel is an array , so you can't simple check with === .

You should use

Array.prototype.indexOf() :

<tr id="custTransGrp" ng-if="transActionGroup && transActionGroup.indexOf('Custom Group') != -1">

or even:

Array.prototype.includes() (Check the browser compatibility in the link):

<tr id="custTransGrp" ng-if="transActionGroup.includes('Custom Group')">