将当前选定的字段传递给按钮的javascript调用

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?

Answer 1

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