I'm currently working on a task where I have an ng-repeat loop that generates multiple dropdowns. Each dropdown is associated with a unique ID generated by the controller for reference purposes.
The issue I am facing is that when a user selects an option from one dropdown, it affects the selected option in all other dropdowns as well. How can I ensure that the selection only applies to the specific dropdown from which it was made?
<div id="{{ mergeVar.name }}" class="alert {{ selectedParamClass }}" ng-repeat="mergeVar in mergeVars">
<b>merge value: </b> {{mergeVar.name}}
<div class="dropdown pull-right">
<button type="button" class="btn btn-sm btn-control dropdown-toggle" data-toggle="dropdown">
{{selectedParameter.name || 'Match the Parameter'}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="param in availableParams">
<a ng-click="selectParameter(parampass)">{{param.name}}</a>
</li>
</ul>
</div>
</div>
//controller.js
$scope.selectParameter = function(parampass) {
console.log('parameter selected')
$scope.selectedParameter = parampass
$scope.selectedParamClass = 'alert-success'
}