Dynamically adding rows to a table using attribute directive in AngularJs

Question

I need to display a table on my HTML page. The table will contain multiple rows. On clicking the '+' icon of a row(let's call it R1), I call an attribute directive to fetch data and display it in a new row(R2) which should be added below the clicked row(R1).

But currently, the data isn't getting displayed and I get a blank row(R2) added below the clicked row(R1).

The code for directive is:

angular.module(
  "app", []
).controller(
  'Ctrl', [
    "$scope",
    function(
      $scope
    ) {
      $scope.items = {
        "first": {
          "name": "item1"
        },
        "second": {
          "name": "item2"
        },
        "third": {
          "name": "item3"
        }
      };
      $scope.showData = false;

    }
  ]
).directive(
  "expandItem", [
    function() {
      return {
        link: function($scope) {
          $scope.showRdoData = false;

          $scope.subitems = {
            "fir": {
              "names": "subitem1"
            },
            "sec": {
              "names": "subitem2"
            },
            "thd": {
              "names": "subitem3"
            }
          };
        },
        restrict: 'A',
        replace: false,
        template: '<tr ng-repeat="row in ::subitems">' +
          '<td style="background-color: red"><i class="fa fa-fw fa-{{showRdoData ? \'minus\' : \'plus\'}}"></i></td>' +
          '<td style="background-color: blueviolet">{{::row.names}}</td></tr>'
      }
    }
  ]
);

Can someone help me in getting the data displayed in the table please? The code is present at JSFiddle. Please let me know if the question isn't clear. I will try to rephrase it if needed.

Jaicob · Accepted Answer · 2017-03-30 03:55:00Z

So the reason you were having issues was because the ngIf directive does not play well with ngRepeat by passing showData to the directive via an isolate scope you can move the ngIf to the <td>'s and achieve the expected behavior. Here is a link to a working fiddle

HTML

<body ng-app="app">
  <table ng-controller="Ctrl">
    <thead>
      <th>Col1</th>
      <th>Col2</th>
    </thead>
    <tbody>
      <tr ng-repeat-start="item in items" ng-click="showData = !showData">
        <td><i class="fa fa-fw fa-{{showData ? 'minus' : 'plus'}}"></i></td>
        <td>{{item.name}}</td>
      </tr>
      <tr ng-repeat-end expand-item show-data="showData"></tr>
    </tbody>
  </table>
</body>

Modified Directive Values

replace:true,
template: '<tr ng-repeat="row in ::subitems">' +
            '<td ng-if="showData" style="background-color: red"><i class="fa fa-fw fa-{{showRdoData ? \'minus\' : \'plus\'}}"></i></td>' +
            '<td ng-if="showData" style="background-color: blueviolet">{{::row.names}}</td>' + 
          '</tr>'

Collectives™ on Stack Overflow

Dynamically adding rows to a table using attribute directive in AngularJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related