CODEWITHSUNDEEP
javascriptarraysangularjsangularjs-ng-repeat
Kiran Shinde
Kiran Shinde

Reputation: 5982

Get length of current array in recursive ng-repeat

Have a look in this fiddle http://jsfiddle.net/uXbn6/4619/

Here I have used recursive templates for printing my data. What I want is 'Hi' text should only get printed only when correspondind array length is greater than 1.

Here for first array 'tree', as length is greater than 1, Hi should be printed. Now in child when repeat loops on data.nodes, as length of data.nodes is 1 or less than 1, 'Hi' should not be get printed.

In short I want output like this for this example

firstParenNode Hi
node1.1
secondParenNode Hi

<script type="text/ng-template"  id="tree_item_renderer.html">
    <div> {{data.name}}
    <span ng-show="tree.length > 1"> Hi </span>
  </div>
    <div ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></div>

 </script>

<div ng-app="myApp" ng-controller="TreeController">
    <div ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></div>
</div>


angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
    $scope.tree = [{
        name: "firstParenNode", 
        nodes: [{
            name: "node1.1",
            nodes: []
        }]
    }, {
        name: "secondParenNode",
        nodes: []
    }];
}]);

Any Help would be appreciated.

Upvotes: 0

Views: 105

Answers (2)

Dmitry Stepanov
Dmitry Stepanov

Reputation: 366

Try it:

<script type="text/ng-template"  id="tree_item_renderer.html">
    <div> {{node.name}} 
        <span ng-show="node.nodes.length > 0"> Hi </span>
    </div>
    <div ng-repeat="node in node.nodes" ng-inlude="'tree_item_renderer.html'"></div>
</script>

<div ng-app="myApp" ng-controller="TreeController">
    <div ng-repeat="data in tree">
        <div> {{data.name}}
            <span ng-show="tree.length > 1"> Hi </span>
        </div>
        <div ng-repeat="node in data.nodes" ng-include="'tree_item_renderer.html'"></div>
    </div>
</div>

See on my Fiddle: http://jsfiddle.net/uXbn6/4622/

Upvotes: 2

csp713
csp713

Reputation: 412

If I understand correctly, just replace

<span ng-show="tree.length > 1"> Hi </span>

with

<span ng-show="data.nodes.length > 1"> Hi </span>.

Upvotes: 1

Related Questions