I'm currently working with two directives: a query builder and a query row. The query builder directive utilizes ng repeat to display query rows from an array. While the add button functions properly, I am looking to add a delete button as well. However, I have encountered an issue where I can't seem to access $index in order to pass it as an argument to the delete function (i.e., delete($index)).
Below is the JS code:
.directive('queryBuilder', function() {
return {
restrict: 'E',
scope: {},
controller: function($scope) {
$scope.rows = [{}]
//add method not utilized - delete in future
$scope.add = function() {
$scope.rows.push({})
}
$scope.$on('addRowRqst', function(evt) {
console.log('add rqst received')
$scope.rows.push({})
});
$scope.$on('deleteRowRqst', function(evt) {
console.log('delete rqst received')
$scope.rows.push({})
});
},
templateUrl: 'queryBuilderTemplate.html',
}
}).directive('queryRow', function() {
return {
scope: {},
restrict: 'EA',
templateUrl: 'queryRowTemplate.html',
controller: function($scope) {
$scope.addRqst = function() {
console.log('addRowRqst click')
$scope.$emit('addRowRqst')
};
$scope.deleteRqst = function(index) {
console.log('deleteRowRqst click')
$scope.$emit('deleteRowRqst')
};
},
link: function(scope, elem, attrs) {
}
}
And here is the HTML code of the query builder template:
<form role="form">
<query-row ng-repeat="row in rows track by $index"></query-row>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Lastly, this is the Delete button within the query row template. When attempting to pass $index as an argument, it appears as 'undefined':
<button class="btn btn-default" ng-click="deleteRqst($index)" type="submit">Delete Row</button>
If you'd like to see the full example, check out the Plunker link provided below:
http://plnkr.co/edit/rDkXpIgiOSoNvLNPsVbP
My main goal is to implement a functioning Delete button that can remove the selected row.