CODEWITHSUNDEEP
javascriptangularjs
Nishant123
Nishant123

Reputation: 1966

Show/Hide <tr> based on MULTIPLE <select> box - angularjs

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

Upvotes: 0

Views: 49

Answers (1)

developer033
developer033

Reputation: 24864

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

Upvotes: 1

Related Questions