AngularJS create directive dynamically inside loop

Question

Problem Statement

I have below two parent and child data structures like this where on parent div header click dynamic directive for showing corresponding child records are created.

But when I click on parent header link corresponding children items are not showing in table structure.Can anyone see where it is wrong?

<script>
    var app = angular.module('TestApp', []);
    app.controller('TestCtrl', function ($scope) {
        $scope.parents = [
            { parent_id: '1', name: 'Parent 1', count: '2' },
            { parent_id: '2', name: 'Parent 2', count: '3' },
            { parent_id: '3', name: 'Parent 3', count: '1' }
        ];

        $scope.getchild= function (parent) {
            var children_list = [
            { id: '1', parent_id: '1', name: 'Test Child 1' },
            { id: '2', parent_id: '1', name: 'Test Child 2' },
            { id: '3', parent_id: '2', name: 'Test Child 3' },
            { id: '4', parent_id: '2', name: 'Test Child 4' },
            { id: '5', parent_id: '2', name: 'Test Child 5' },
            { id: '6', parent_id: '3', name: 'Test Child 6' }
            ];

            var directive_name = 'clschild_' + parent.parent_id;
            app.directive(directive_name, function() {

                var child_html = '<div class="panel-body"> \
                    <table ng-attr-id="tblchild_'+ parent.parent_id + '" class="table table-hover"> \
                        <thead> \
                            <tr> \
                                <td>Name</td> \
                            </tr> \
                        </thead> \
                        <tbody> \
                            <tr ng-repeat="child in children"> \
                                <td>{{child.name}}</td> \
                            </tr> \
                        </tbody> \
                    </table> \
                </div>';
                return {
                    template: child_html,
                    link: function (scope) {
                        scope.$apply(function () { scope.children = children_list; });
                    }
                }
            });
        };
    });

</script>

and corresponding HTML is

<div ng-app="TestApp" ng-controller="TestCtrl">
    <div class="panel panel-default" ng-repeat="parent in parents">
        <div class="panel-heading clearfix">
            <a data-toggle="collapse" ng-href="#divchild_{{parent.id}}" ng-click="getchild(parent);" class="pull-left" style="padding-top: 7.5px;">{{parent.name}}</a>
        </div>
        <div ng-attr-id="divchild_{{parent.id}}" class="panel-collapse collapse">
            <div class="clschild_{{parent.id}}">
                <div class="panel-body">
                    aaa
                </div>
            </div>
        </div>
    </div>
</div>

and here is a plnkr example

I am learning angularjs day by day so please bear with me if I am wrong somewhere in implementing above.

Your help is appreciated.Thanks.

I think a better approach will be, create a directive, and use ng-repeat to show all the data. — Haocheng
– Haocheng, Commented Jan 11, 2016 at 4:29
Thanks so you mean two separate directives for parent and children. — Navoneel Talukdar
– Navoneel Talukdar, Commented Jan 11, 2016 at 4:37
I think your way to show the children is wrong! you have to change it — Maher
– Maher, Commented Jan 11, 2016 at 4:46

MasoodRehman · Accepted Answer · 2016-01-11 05:09:03Z

Here is another test case of your problem take a look at this one hope you get some thing useful. http://plnkr.co/edit/MMZXa7BViOQBEuH87Kyd?p=preview

var app = angular.module('TestApp', []);
app.controller('TestCtrl', ['$scope', function ($scope) {
    $scope.clicked_parent = 0;
    $scope.parents = [
        { id: '1', name: 'Test Parent 1', count: '2' },
        { id: '2', name: 'Test Parent 2', count: '3' },
        { id: '3', name: 'Test Parent 3', count: '1' }
    ];

    $scope.children_list = [
      { id: '1', parent_id: '1', name: 'Test Child 1' },
      { id: '2', parent_id: '1', name: 'Test Child 2' },
      { id: '3', parent_id: '2', name: 'Test Child 3' },
      { id: '4', parent_id: '2', name: 'Test Child 4' },
      { id: '5', parent_id: '2', name: 'Test Child 5' },
      { id: '6', parent_id: '3', name: 'Test Child 6' }
    ];

    $scope.isParentTagClicked = false;
    $scope.set_parent_id = function(_id){
      $scope.isParentTagClicked = !$scope.isParentTagClicked;
      if ($scope.isParentTagClicked){
        $scope.clicked_parent = _id; 
      }else{
        $scope.clicked_parent     = 0;
      }
    };

}]);

<!DOCTYPE html>
<html ng-app="TestApp">

  <head>
    <script src="//code.angularjs.org/1.2.20/angular.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container" ng-controller="TestCtrl">

      <div class="panel panel-default" ng-repeat="parent in parents">
        <div class="panel-heading" ng-click="set_parent_id(parent.id)">{{parent.id}}</div>
        <div class="panel-body" ng-repeat="child in children_list" ng-show="child.parent_id == clicked_parent" ng-if="child.parent_id == parent.id">
          Panel content - {{child.parent_id}}
        </div>
      </div>

    </div>
  </body>

</html>

Maher · Accepted Answer · 2016-01-11 04:57:52Z

I hope this example helps you

If you want to create dynamic directives you have to use all attribute of them like scope, template, ngTransclude, replace and ...

This example show you how to bind data from controller to one directive using scope.

angular.module("app", []);
 angular.module("app").controller("ctrl", function($scope, $filter) {
    $scope.parents = [
        { id: 1, name: "Test Parent 1", count: "2" },
        { id: 2, name: "Test Parent 2", count: "3" },
        { id: 3, name: "Test Parent 3", count: "1" }
    ];

    $scope.children = [
        { id: 1, parent_id: 1, name: "Test Child 1" },
        { id: 1, parent_id: 1, name: "Test Child 2" },
        { id: 1, parent_id: 2, name: "Test Child 3" },
        { id: 1, parent_id: 2, name: "Test Child 4" },
        { id: 1, parent_id: 2, name: "Test Child 5" },
        { id: 1, parent_id: 3, name: "Test Child 6" }
    ];


   $scope.getChild = function(parentId) {
     var findChildren = $filter("filter")($scope.children, {
       parent_id: parentId
     });
     $scope.setChild = findChildren;
   }

 });

 angular.module("app").directive("directive", function() {
   var template = "<div class=\"panel-body\">" +
     "<table class=\"table table-hover\">" +
     "<thead>" +
     "<tr>" +
     "<td>Name</td>" +
     "</tr>" +
     "</thead>" +
     "<tbody>" +
     "<tr ng-repeat=\"child in children\">" +
     "<td>{{child.name}}</td>" +
     "</tr>" +
     "</tbody>" +
     "</table>" +
     "</div>";
   return {
     scope: {
       child: "="
     },
     template: template,
     link: function(scope, elm, attrs, ctrl) {

       scope.$watch("child", function(newValue) {
         if (newValue)
           scope.children = newValue;
       }, true);

     }
   };
 });

<!doctype html>
<html ng-app="app" ng-controller="ctrl">

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <h1>parent list</h1>
    <ul class="list-group">
      <li class="list-group-item" ng-repeat="parent in parents">
        {{parent.name}}

        <button ng-click="getChild(parent.id)" class="btn btn-sm btn-success pull-right">click to get child</button>
      </li>
    </ul>
    <hr />

    <h1>child list</h1>

    <directive child="setChild"></directive>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

</body>

</html>

Collectives™ on Stack Overflow

AngularJS create directive dynamically inside loop

Problem Statement

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem Statement

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related