Pass currently selected field to a button's javascript call

Question

I have some select fields populated from a database as well as some buttons to go with them.

<td class="col-md-1" colspan="1" style="text-align: center; vertical-align: middle;">
    <button class="btn btn-primary" data-ng-click="removeContract(name.value, contractIndex)">button</button>
</td>
<td class="col-md-5" colspan="5">
    <label class="control-label">{{item.fields[132].displayName}}</label>
    <select size="5">
        <option data-ng-repeat="name in entities[0].itemAttrs">{{name.value}}</option>
    </select> 
</td>

The select is populated by the database using ng-repeat. When the button is pressed removeContract() is run and I want to pass the currently selected option in the select field.

I tried passing name.value but because the button is outside the ng-repeat it doesn't understand it. How do I fix this?

Not sure about ng1 - but you could always just DOM query in `removeContract()`... `document.querySelector('option:checked')` — Zze, Apr 14 '17 at 20:37

score 3 · Accepted Answer · edited May 23 '17 at 11:54

Put a model on the select element that's a property of your controller (it's not strictly necessary to include a dot, but it's a good practice to avoid confusing scope scenarios), and pass that to your function:

<td ...>
    <button data-ng-click="removeContract(ctrl.selectValue, contractIndex)">button</button>
    <!-------------------------------------------^ -->
</td>

<td class="col-md-5" colspan="5">
    <label ...>{{item.fields[132].displayName}}</label>
    <select size="5" ng-model="ctrl.selectValue">
    <!--------------------------------^ -->
        <option data-ng-repeat="name in entities[0].itemAttrs">{{name.value}}</option>
    </select>
</td>

https://docs.angularjs.org/api/ng/directive/select

Pass currently selected field to a button's javascript call

1 Answers1