I have a scenario where my ng-repeat generates different elements and I need to perform certain operations, such as creating variables, within the scope of the ng-repeat.
Is there a way to access the specific ng-repeat scope?
How can I achieve something like this?
<div ng-repeat="item in items">
<button onclick="load(item, $scope)"></button>
</div>
I want to ensure that $scope pertains only to the ng-repeat scope. Is there a way to accomplish this?
EDIT
This is the issue at hand:
The code:
HTML
<div ng-repeat="item in items" class="container">
<div class="row">
Name: {{item.name}}
<select ng-model="item['id']"
ng-options="opt for opt in ids"
ng-change="loadTypes(item)"
>
<option value="">Default</option>
</select>
<select ng-model="item['type']"
ng-options="opt for opt in types"
>
<option value="">Default</option>
</select>
</div>
</div>
Controller
//Executed once when the module is loaded
$scope.init = function(){
//Retrieve all IDs from the database
$scope.ids = getIdsFromServer();
}
//Executed when an ID select changes
$scope.loadTypes = function(item){
//Fetch possible types for a given ID
types = getTypesFromServer(item.id);
/*
Can we make it so that thisItemNgRepeatScope.types = getTypesFromServer(item.id) ?!??!! Something similar?
*/
}
The challenge:
IDs remain consistent throughout the entire document, which is functioning correctly.
However, I would like to update the model for the second select (types) only within the context of the ng-repeat scope. When I change the ID, I want to retrieve all possible types specific to that ID, but only within the row where the change was made, i.e., where the select element resides.
Any suggestions on how I can achieve this?