As someone who is new to AngularJs, I am currently working on implementing table filtering and deleting the correct object when the delete button is clicked.
This is my previous implementation before filtering:
$scope.rowIndex = -1;
$scope.selectRow = function(index) {
if (index == $scope.rowIndex)
$scope.rowIndex = -1;
else
$scope.rowIndex = index;
}
});
In my HTML:
ng-repeat="session in sessons " ng-class="{'bg-primary':rowIndex == $index }" ng-click="selectRow($index)"
After implementing filtering, I discovered that $index was not working correctly. I had to find another solution. After reading some articles, it seemed like passing the entire object to the function was the way to go. However, every example showed this being done inside the ng-repeat. Unfortunately, I couldn't do that because I have an external div for the Modal.
So how can I pass the current selected session/row of the table to the function inside the modal? {{ deleteSession(session) }}
<div id="deleteSessionModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
<h4 class="modal-title">Delete Session</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete these Records?</p>
<p class="text-warning">
<small>This action cannot be undone.</small>
</p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-danger" value="Delete" ng-click="deleteSession(session)">
</div>
</form>
</div>
</div>
</div>