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
– Shushanth Pallegar, Commented Oct 16, 2015 at 12:10

Michel · Accepted Answer · 2015-10-16 12:45:32Z

1

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": [] 
}];

edited Oct 16, 2015 at 12:45

answered Oct 16, 2015 at 12:10

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

blue-sky Over a year ago

What data are you referring to ? I used data referred to at angular-ui-tree.github.io/angular-ui-tree/#/basic-example

Shushanth Pallegar · Accepted Answer · 2015-10-16 12:21:53Z

-1

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)"

answered Oct 16, 2015 at 12:21

Shushanth Pallegar

2,8721 gold badge17 silver badges17 bronze badges

Collectives™ on Stack Overflow

Unable to get simple tree working in AngularJS + AngularUI

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related