0

I have an object like so:

$scope.group = {  
    "Jim Jenkins": {
      "Blue": {
        "Circle": [
          "Item1",
          "Item2",
          "Item3"
        ]
      }
    },
    "Rachel Smith": {
      "Blue": {
        "Circle": [
          "Item 1"
        ]
      },
      "Red": {
        "Circle": [
          "Item 1",
          "Item 2"
        ]
      }
    }
}

I created a nested ng-repeat function that cycles through the object and displays it.

<script type="text/ng-template" id="group.html">
    <ul style="padding:10px;">

        <li type="none" ng-repeat="(i, c) in group">

          <div ng-click="test(i)" style="background-color:#fff;padding:5px;" ng-if="i.length > 0">{{ i }}</div>
          <div ng-click="test(c)" style="background-color:#fff;padding:5px;margin-bottom:5px;" ng-if="!i.length">{{ c }}</div>

          <div ng-switch on="i.length > 0">
            <div ng-switch-when="true">
                <div ng-init="group = c;" ng-include="'group.html'"></div>
            </div>
          </div>

        </li>
    </ul>
</script>

<div ng-include="'group.html'" ng-model="group"></div>

My only issue is, now I have now way of linking back to the original $scope.group object. I have a ng-click where I display the items and I'd like to be able to know where this element is located (so I know what the parent is, know how many levels in, add more items, etc).

Does anyone know how I can achieve this?

bryan
  • 8,879
  • 18
  • 83
  • 166
  • Very strange usage of ng-model here, only meant for inputs and form validation really https://docs.angularjs.org/api/ng/directive/ngModel Also slightly strange use of ng-init... think you probably should restructure the directive to handle the tree of data http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/ Regarding finding the element in the data structure and finding its siblings or parent this can be done with extra functions (utilities) around the object or you may consider restructuring to use something like a graph/tree/linked to ease traversal. – shaunhusain Dec 06 '17 at 16:58
  • I can't do anything about the structure of the object so the GitHub link you send is really confusing :( @shaunhusain – bryan Dec 06 '17 at 17:05
  • Sorry my bad on the link not really a great example there are some on SO here with a RecursionHelper factory that makes setting up "recursive" directives dead simple, will link if I can find it here. Regarding the data structure you can always use a little more client side memory and re-organize things even if you're handed a data structure in one way sometimes more efficient to rearrange it for future operations. https://stackoverflow.com/questions/14430655/recursion-in-angular-directives – shaunhusain Dec 06 '17 at 17:08
  • I appreciate the info and the recommendation. I'm jealous you think it's dead simple. I shall drink copious amounts of coffee and pray to the angular gods that I can figure it out. Thank you @shaunhusain – bryan Dec 06 '17 at 17:12
  • Haha yeah maybe simple was an overstatement but once you figure out how to use that recursion helper factory it really does make it a lot easier than trying to figure it out yourself (believe me not a fan of recursion in general but sometimes it is the most direct solution) – shaunhusain Dec 06 '17 at 17:14

1 Answers1

1

Try like this

var app = angular.module("app", []);

app.controller('mainCtrl', function($scope) {
$scope.isArray = angular.isArray;
  $scope.group = [{
      "Jim Jenkins": {
        "Blue": {
          "Circle": [
            "Item1",
            "Item2",
            "Item3"
          ]
        }
      },
      "Rachel Smith": {
        "Blue": {
          "Circle": [
            "Item 1"
          ]
        },
        "Red": {
          "Circle": [
            "Item 1",
            "Item 2"
          ]
        }
      }
   
  }]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />

<div ng-app="app" ng-controller="mainCtrl">
  <script type="text/ng-template" id="dummy.html">
    <ul>
      <li ng-repeat="(k,v) in group">
   
        <div ng-include=" 'nested.html' " onload="group = v"></div>
      </li>
    </ul>
  </script>
  <script type="text/ng-template" id="nested.html">
    <div ng-repeat="(k1,v1) in v">{{k1}}
      <ul>
       <li ng-if="isArray(v1)" ng-repeat="val in v1">
       {{val}}
       </li>
         </ul>
       <li ng-if="!isArray(v1)" >
        <div ng-include=" 'dummy.html' " onload="group = v1"></div>
       </li>
    </div>
  </script>
  <div ng-include=" 'dummy.html'"></div>
</div>
Hadi J
  • 16,989
  • 4
  • 36
  • 62