Angularjs ng repeat - delete by $index

Question

I have the following two directives. One is a query builder and the other is a query row. The query builder directive uses ng repeat to list query rows from an array. The add button works, however I'd like to include a delete button. However, the problem is I cannot seem to get $index so that I can 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 used - delete in future
        $scope.add = function() {
          $scope.rows.push({})
        }

        $scope.$on('addRowRqst', function(evt) {
          // evt.stopPropagation()
          console.log('add rqst received')
          $scope.rows.push({})
        });
        $scope.$on('deleteRowRqst', function(evt) {
          // evt.stopPropagation()
          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>

And here is the Delete button (part of the query row template). The $index here is 'undefined' when I try to pass it as an argument

<button class="btn btn-default" ng-click="deleteRqst($index)" type="submit">Delete Row</button>

Here's the plunker http://plnkr.co/edit/rDkXpIgiOSoNvLNPsVbP

My goal: get a Delete button to work and delete the selected row

I'm not sure why this doesn't work but you don't need to include the track by $index. ng-repeat automatically creates the $index which is available inside of the repeat — efarley
– efarley, Commented Jan 5, 2016 at 20:36

Seth Flowers · Accepted Answer · 2016-01-05 21:19:46Z

2

It is because $index is on the parent scope, but you are using an isolate scope in your query-row directive.

Try the following:

<button class="btn btn-default" ng-click="deleteRqst($parent.$index)" type="submit">Delete Row</button>

Alternatively, remove the isolate scope.

edited Jan 5, 2016 at 21:19

answered Jan 5, 2016 at 20:33

Seth Flowers

9,2302 gold badges34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1142130 Over a year ago

That works, however is there a better way of doing this? I'm left with the impression that using $parent is to be avoided, due to possible complications if more parent directives are added in the hierarchy? Or am I just wrong

Seth Flowers Over a year ago

Do you need an isolate scope in your query-row directive (scope: {})? Try removing that and also removing the $parent.. You can change it to scope: false, or scope: true. See the scope section under docs.angularjs.org/api/ng/service/…

Collectives™ on Stack Overflow

Angularjs ng repeat - delete by $index

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related