javascript - ngSelect - 任意深度的嵌套选项

Question

在我的应用程序中，我有一个具有以下结构的对象数组

[{"ID":1, "parentID":0, "name":"Parent #1"}, 
{"ID":2, "parentID":0, "name":"Parent #2"}, 
{"ID":3, "parentID":1, "name":"Child #1 1"}, 
{"ID":4, "parentID":3, "name":"child #1 2"},
{"ID":5, "parentID":2, "name":"child #2 1"},
{"ID":6, "parentID":5, "name":"child #2 2"}]

我想将其呈现为一个选择菜单，允许用户选择一个叶节点，同时仍然输出不可选择的父节点以显示结构的层次结构。

我尝试了几种方法，其中最成功的方法是在我的 Angular 模板中，遵循以下几行。

<div ng-repeat="(idx, category) in $scope.allCats">
    <select ng-model="$scope.cats[idx]" 
            ng-options="cat as cat.name group by $scope.parentName(cat.parentID, idx) for cat in $scope.allCategories track by cat.ID">
        <option value="">Select A Category</option>
    </select>
</div>

$scope.allCats是上面的数组和$scope.parentName()方法返回一个字符串。

下面的截图展示了这个问题。即所有父项目出现两次，一次是 <option>并且曾经作为 <optgroup> ，而我宁愿它们只作为一个可选择的项目出现，但它们显然是一个父项目，并且不维护结构的层次结构；具有祖先和后代的子节点未出现在正确的“家谱”结构中。

我怎样才能改变我注入(inject)的数据或我的 Angular 模板来实现我想要的行为？

也就是说，要显示整个层次结构，如 parentID 所定义的那样属性，因此每个家族都有一个共同的祖先，并且父项只出现一次。

我怀疑这会变得复杂，因为可能存在不止一个级别的后代，而且我希望尽可能保持一般性。

Answer 1

在将数组传递给 Angular 模板之前，如何在范围内对数组进行排序？如果你有:

var arr = [
  {"ID":1, "parentID":0, "name":"Parent #1"}, 
    {"ID":3, "parentID":1, "name":"Child #1 1"}, 
      {"ID":4, "parentID":3, "name":"child #1 2"},
        {"ID":7, "parentID":4, "name":"asdfadsf"},
  {"ID":2, "parentID":0, "name":"Parent #2"}, 
    {"ID":5, "parentID":2, "name":"child #2 1"},
      {"ID":6, "parentID":5, "name":"child #2 2"}
];

这会更容易。只需按原样显示即可。

排序代码:

var sortKeys = {};

// computes a unique sort key
function getSortKey(item) {
  if(sortKeys[item.ID] === undefined) {
    var parentItem = arr.filter(function(it) {
      return it.ID === item.parentID;
    })[0];

    if(parentItem != null) {
      return getSortKey(parentItem)  + '' + item.ID;
    }

    return item.parentID + '' + item.ID;
  }

  return sortKeys[item.ID];
}

// build sort keys to be used to sort items following their hierarchy
arr.forEach(function(item) {
  sortKeys[item.ID] = getSortKey(item);
});

// sort the array
arr.sort(function(item1, item2) {    
  var item1SortKey = sortKeys[item1.ID],
      item2SortKey = sortKeys[item2.ID];

  return item1SortKey < item2SortKey ?
    -1 :
    (item1SortKey > item2SortKey ?
      1:
      0);
});

var arr = [{"ID":1, "parentID":0, "name":"Parent #1"}, 
{"ID":2, "parentID":0, "name":"Parent #2"}, 
{"ID":3, "parentID":1, "name":"Child #1 1"}, 
{"ID":4, "parentID":3, "name":"child #1 2"},
{"ID":5, "parentID":2, "name":"child #2 1"},
{"ID":6, "parentID":5, "name":"child #2 2"},
{"ID":7, "parentID":4, "name":"asdfadsf"}];

var sortKeys = {};

// computes a unique sort key
function getSortKey(item) {
  if(sortKeys[item.ID] === undefined) {
    var parentItem = arr.filter(function(it) {
      return it.ID === item.parentID;
    })[0];

    if(parentItem != null) {
      return getSortKey(parentItem)  + '' + item.ID;
    }

    return item.parentID + '' + item.ID;
  }
  
  return sortKeys[item.ID];
}

// build sort keys to be used to sort items following their hierarchy
arr.forEach(function(item) {
  sortKeys[item.ID] = getSortKey(item);
});

// sort the array
arr.sort(function(item1, item2) {    
  var item1SortKey = sortKeys[item1.ID],
      item2SortKey = sortKeys[item2.ID];
  
  return item1SortKey < item2SortKey ?
    -1 :
    (item1SortKey > item2SortKey ?
      1:
      0);
});

document.getElementById('result').innerHTML = JSON.stringify(arr, null, 2);

<pre id="result"></pre>