Unable to get simple tree working in AngularJS + AngularUI

Question

All of required libraries are available. But I receive error :

angular.js:11855 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in list, Duplicate key: string:", Duplicate value: "
http://errors.angularjs.org/1.3.15/ngRepeat/dupes?p0=item%20in%20list&p1=string%3A%22&p2=%22
    at REGEX_STRING_REGEXP (angular.js:263)
    at ngRepeatAction (angular.js:24831)
    at Object.$watchCollectionAction [as fn] (angular.js:14373)
    at Scope.$get.Scope.$digest (angular.js:14508)

I could fix this by adding track by $index to ng-repeat but this is not same as sample code given on homepage : https://github.com/angular-ui-tree/angular-ui-tree

index.html :

<!doctype html>

<html ng-app="app">

<head>

<script src="js/jquery-1.11.2.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-ui-tree.js"></script>
<script src="tree.js"></script>
<link rel="stylesheet" href="js/angular-ui-tree.min.css" />

</head>

</head>


<body ng-controller="MainCtrl">


        <div>

            <div ui-tree>
  <ol ui-tree-nodes="" ng-model="list">
    <li ng-repeat="item in list  track by $index" ui-tree-node>
      <div ui-tree-handle>
        {{item.title}}
      </div>
      <ol ui-tree-nodes="" ng-model="item.items">
        <li ng-repeat="subItem in item.items  track by $index" ui-tree-node>
          <div ui-tree-handle>
            {{subItem.title}}
          </div>
        </li>
      </ol>
    </li>
  </ol>
</div>
</div>

</body>

<div ui-tree>
  <ol ui-tree-nodes="" ng-model="list">
    <li ng-repeat="item in list" ui-tree-node>
      <div ui-tree-handle>
        {{item.title}}
      </div>
      <ol ui-tree-nodes="" ng-model="item.items">
        <li ng-repeat="subItem in item.items" ui-tree-node>
          <div ui-tree-handle>
            {{subItem.title}}
          </div>
        </li>
      </ol>
    </li>
  </ol>
</div>
</html>
tree.js : 

var app = angular.module('app' , ['ui.tree']);

app.controller('MainCtrl',function($scope, $timeout) {

    $scope.list = "[{ \"id\": \"1\", \"title\": \"1. dragon-breath\", \"items\": [] }]"

                });

Update :

By "not working" I mean nothing is being display on screen, just error returned to console.

whats not working here ?.,could you please elaborate more on not working Is the ui-tree not loading on DOM?.. — Shushanth Pallegar, Oct 16 '15 at 12:10

Michel · Answer 1 · 2015-10-16T12:45:32.537

I could fix this by adding track by $index to ng-repeat but this is not same as sample code given on homepage

Your sample data (see $scope.list) is also not the same as the one in the example provided on github project page. That's why you had to add track by so as to get rid of the error.

Why you get the error:

You get the error because you declared $scope.list as a string:

$scope.list = "[{ \"id\": \"1\", \"title\": \"1. dragon-breath\", \"items\": [] }]"

This is a collection of characters, and it has duplicates in it. For example there are multiple { or i in $scope.list.

It should be more like:

$scope.list = [{ 
    "id": "1", 
    "title": "1. dragon-breath", 
    "items": [] 
}];

What data are you referring to ? I used data referred to at http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example — blue-sky, Oct 16 '15 at 12:12

score -1 · Accepted Answer · answered Oct 16 '15 at 12:21

There are two problems $scope.list is a string , use as below

 $scope.lists = [{ "id": "1", "title": "1. dragon-breath", "items": [] }];

As far ui-tree is concerned , uses $$hashkey not $index ,So it will be

ng-repeat="list in lists track by list.$$hashKey"

or

ng-repeat="list in lists track by $id(list)"

Unable to get simple tree working in AngularJS + AngularUI

2 Answers2