如何按摩数据，以便我可以使用<li> </li>嵌套ng-repeat

Question

（请不要更新语法/英语错误，我没有足够的积分，我的问题将永远受到打击 - 随时发表评论）

我应该如何按摩数据，以便我可以为以下场景加载数据：

在页面加载时，我发出请求并获得响应，我得到一个以蓝线表示的值数组，

$ scope.blueli = [item1，item2，item3，item4];

然后针对每个蓝色ID值我再次发出请求并获取该特定ID的值，并以粉红色<li>填充内容

我正在考虑使用下划线并以这种方式按摩它  [item1：[i1，i2，i3，i4]，item2：[j1，j2，j3，j4]，item3：[k1，k2，k3，k4]];

fyi：蓝色和粉红色的值的数量是动态的。

<div class="row">
                <ul>
                    <li class="no-bullet-li li-12" ng-repeat="plan in json">
                        {{plan.name}}
                    <ul>
                         <li class="no-bullet-li li-8" ng-repat="item in plan.list">{{item}}
                         {{plan.list}}
                            soemthing comes here 2
                        </li>
                    </ul> 
                    </li>


                </ul>
            </div>

// controller

让我们在控制器中说我按摩数据并得到如下的最终结果。

           $scope.json=[
            {"name":"John", "list":["plan1", "plan2", "plan3"]}, 
            {"name":"Anna", "list":["plan1", "plan2", "plan3"]}, 
            {"name":"Peter", "list":["plan1", "plan2", "plan3"]}, 
           ]; 

问题：
1）为什么它不为列表中的每个值列出单独的粉红色li-s。
2）li标签在html中不能很好地分开。

Answer 1

这是你在找什么？

var blueItems = ['item1', 'item2', 'item3'];
var bluePinkItems = [];

function loadPinkItems(id) {
  // Use the id to get the pink items
  // If this is async then you'll need to do a callback
  return [1, 2, 3, 4, 5];
}

angular.forEach(blueItems, function(item) {
  bluePinkItems[item] = loadPinkItems(item);
});

// This ensures angular doesn't render until all the data is loaded
// If this is async and you want to load after each request then you can put it in the loop
$scope.data = bluePinkItems;

/*
$scope.data = {
  item1: [1, 2, 3, 4, 5],
  item2: [1, 2, 3, 4, 5],
  item3: [1, 2, 3, 4, 5]
};
*/

然后html看起来像

<ul>
  <li ng-repeat="(blueItem,pinkItems) key in data">
    {{blueItem}}
    <ul>
      <li ng-repeat="pinkItem in pinkItems">
        {{pinkItem}}
      </li>
    </ul>
  </li>
</ul>

或者您可以使用数组和索引，这是我喜欢的

<ul>
  <li ng-repeat="blueItem key in blueItems">
    {{blueItem}}
    <ul>
      <li ng-repeat="pinkItem in bluePinkItems[blueItem]">
        {{pinkItem}}
      </li>
    </ul>
  </li>
</ul>