如何按摩数据，以便我可以将嵌套的 ng-repeat 与 <li> 一起使用答案

【问题标题】：how to massage data so that I can use nested ng-repeat with <li>如何按摩数据，以便我可以将嵌套的 ng-repeat 与 <li> 一起使用
【发布时间】：2015-02-06 18:47:03
【问题描述】：

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

我应该如何处理数据以便我可以为以下场景加载数据：

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

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

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

我正在考虑使用下划线并以这种方式按摩它 [项目1：[i1，i2，i3，i4]，项目2：[j1，j2，j3，j4]，项目3：[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>

//控制器

假设我在控制器中处理了数据并得到如下所示的最终结果。

           $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 中没有很好地分开。

【问题讨论】：

"1) 为什么它不为列表中的每个值列出单独的粉色 li-s。"你的意思是为什么它不显示<li>plan1</li><li>plan2</li>... 然后是因为你使用的是{{plan.list}} 而不是{{item}}
"li 标签在 html 中没有很好地分开。"这是因为您将粉色 li 包裹在蓝色 li 中。你会想要<ul><li><div class="blue">John</div><ul><li><div class="pink">plan1</div></li></ul></li></ul>

标签： angularjs

【解决方案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>

【讨论】：