无法让简单的树在 AngularJS + AngularUI 中工作

Question

所有必需的库都可用。但我收到错误：

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)

我可以通过将 track by $index 添加到 ng-repeat 来解决这个问题，但这与主页上给出的示例代码不同：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\": [] }]"

                });

更新：

"not working" 我的意思是屏幕上没有显示任何内容，只是错误返回到控制台。

Answer 1

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

您的示例数据（参见 $scope.list）也与 github 项目页面上提供的示例中的数据不同。这就是为什么您必须添加 track by 以消除错误的原因。

为什么会报错：

您收到错误是因为您将 $scope.list 声明为字符串：

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

这是一个字符集，里面有重复的字符。例如$scope.list.

中有多个{或i

应该更像是：

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

Answer 2

有两个问题$scope.list是一个字符串，如下使用

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

就 ui-tree 而言，使用 $$hashkey 而不是 $index，所以它将是

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

或

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

无法让简单的树在 AngularJS + AngularUI 中工作

Unable to get simple tree working in AngularJS + AngularUI

angularjs

angular-ui

angular-ui-tree