javascript - 需要 ng-repeat 的 Angular 方向吗？

Question

我对 ng-repeat 指令没有什么复杂的结构，我在遍历它时卡住了。我只是在数组中发布数据表示 JSON 格式

{"data":[
         ["sameer","1001",
          [
           {"button_icon":"fa fa-pencil",
            "button_tt":"create invoice",
            "button_color":"btn-success"
           },
           {"button_icon":"fa fa-pencil",
            "button_tt":"create invoice",
            "button_color":"btn-danger"
           }
          ]
         ],
         ["jack","1002",
          [
           {"button_icon":"fa fa-pencil",
            "button_tt":"create invoice",
            "button_color":"btn-success"
           },
           {"button_icon":"fa fa-pencil",
            "button_tt":"create invoice",
            "button_color":"btn-danger"
           }
          ]
        ]
}

它是一个数组(array(array()))，最后一个内部数组用于将附加到每一行的按钮。我在附加该按钮时被卡住了。我已经在使用嵌套的 ng-repeat，但对第三个感到困惑。

这是我的html

<tbody>
    <tr ng-repeat = "row in list.data">

      <td ng-if = "(row.length - 1) != $index"  class="text-center"  ng-repeat = "val in row track by $index" ng-cloak>{{val}}</td>
      <td ng-if = "(row.length - 1) == $index" class="text-center">
          <div class="btn-group" ng-cloak>
            <a ng-repeat = "btn in row" data-toggle="tooltip" title="{{btn.button_tt}}" class="btn btn-xs {{btn.button_color}}" data-original-title="Edit" ng-click="viewExpense(1)"><i class="{{btn.button_icon}}"></i></a>
          </div>
        </td>
    </tr>

Answer 1

我相信你还需要一个循环。

row in list.data中的row是第一层:

["sameer","1001",
      [
       {"button_icon":"fa fa-pencil",
        "button_tt":"create invoice",
        "button_color":"btn-success"
       },
       {"button_icon":"fa fa-pencil",
        "button_tt":"create invoice",
        "button_color":"btn-danger"
       }
      ]
 ]

btn in btn in row 是第二层也是一个数组:

[
    {"button_icon":"fa fa-pencil",
     "button_tt":"create invoice",
     "button_color":"btn-success"
    },
    {"button_icon":"fa fa-pencil",
      "button_tt":"create invoice",
      "button_color":"btn-danger"
    }
]

你应该像这样添加第三层:

<div class="btn-group" ng-cloak>
    <div ng-repeat = "innerRow in row">
        <a ng-repeat = "btn in innerRow" data-toggle="tooltip" title="{{btn.button_tt}}" class="btn btn-xs {{btn.button_color}}" data-original-title="Edit" ng-click="viewExpense(1)"><i class="{{btn.button_icon}}"></i></a>
    </div>
</div>   

希望对你有帮助