Javascript 如何在angularjs中使用ng repeat显示集合

我有需要显示的json集（列）：

我想不出使用ng repeat“循环”它的方法。我将以下模板定义为初学者：

  <div ng-repeat="s in sets">
       <div class="panel panel-info">
            <div class="panel-heading"><span><bold>Server:&nbsp;{{s.serverNum}}</bold></span></div>
            <div class="panel-body">
                <div>
                  <input type="checkbox" value="all#" ng-click="doNothing($event)"/>Select All
                </div>
                <div class="divider">&nbsp;</div>
                <div ng-repeat="p in s.properties">
                   <label class="margin-right12">
                       <input type="checkbox"                                                                        name="property_{{p.innCode}}"
                          value="{{p.innCode}}" ng-click="doNothing($event)"/> <small>{{innCode}} - {{p.propertyName}}</small>
               </label>
            </div>
          </div>
        </div>
     </div>

服务器：{s.serverNum}
全选
{{innCode}}-{p.propertyName}

谢谢

你可以这样做
控制器内部

$scope.data = {
   "2": [
         {
           "$id": "1",
           "serverId": 1622,
           "innCode": "PLOIKJ7",
           "propertyName": "Property 1",
          },
         {
           "$id": "2",
           "serverId": 1622,
           "innCode": "BHGTRWA",
           "propertyName": "Property 2",
          }
        ],
     "3": [
          {
            "$id": "3",
             "serverId": 1623,
             "innCode": "TGHRE#W",
             "propertyName": "Property 3",
           }
        ]
  };

在模板内部

<div ng-controller="yourCntroName">
        <div ng-repeat="(key, val) in data">// By this line you will get all keys of your set. '2' and '3' in your case
            <div ng-repeat="obj in val"> // val will give you value of key(first time '2' and second time '3' in your case) that is an array so again use repeat.
                {{'$id = '+obj.$id+' ,'}}{{'serverId = '+obj.serverId}}
            </div>
        </div>
 </div>

//通过这条线，你将得到你的所有钥匙。”2'和3'在您的情况下
//val将为您提供键的值（在您的情况下，第一次为'2'，第二次为'3'），这是一个数组，所以再次使用repeat。
{{{'id='+obj.$id+'，'}}{{'serverId='+obj.serverId}}

内置的

ng repeat

指令的文档可用

根据该文档，适用于您的用例的表达式应该是表达式中的

ng repeat=“（key，value）”

<代码>表达式应在代码中替换为

set

最终，你应该得出如下结论：

  <div ng-repeat="(count, servers) in sets">
    <div class="panel panel-info">
      <div class="panel-heading">
        <span><bold>Server:&nbsp;{{count}}</bold></span>
      </div>
      <div class="panel-body">
        <div>
          <input type="checkbox" value="all#" ng-click="doNothing($event)" />Select All
        </div>
        <div class="divider">&nbsp;</div>
        <div ng-repeat="server in servers">
          <label class="margin-right12">
            <input type="checkbox" name="property_{{server.innCode}}" value="{{server.innCode}}" ng-click="doNothing($event)" /> <small>{{server.innCode}} - {{server.propertyName}}</small>
          </label>
        </div>
      </div>
    </div>
  </div>

服务器：{{count}
全选
{{server.innCode}-{{server.propertyName}

---

您的标记可能需要很多改进，但每次只做一件事-我建议您阅读文档

您能提供以Column显示的UI吗？

  <div ng-repeat="(count, servers) in sets">
    <div class="panel panel-info">
      <div class="panel-heading">
        <span><bold>Server:&nbsp;{{count}}</bold></span>
      </div>
      <div class="panel-body">
        <div>
          <input type="checkbox" value="all#" ng-click="doNothing($event)" />Select All
        </div>
        <div class="divider">&nbsp;</div>
        <div ng-repeat="server in servers">
          <label class="margin-right12">
            <input type="checkbox" name="property_{{server.innCode}}" value="{{server.innCode}}" ng-click="doNothing($event)" /> <small>{{server.innCode}} - {{server.propertyName}}</small>
          </label>
        </div>
      </div>
    </div>
  </div>