Question

我有这个需要显示的json集（在列中）：

  {
   "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",
           }
        ]
  }

我无法想到一种方法来循环播放＆＃34;通过它使用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>

谢谢！

Answer 1

你可以这样做在控制器内部

$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>

Answer 2

内置ng-repeat指令的文档可用here。

根据该文档，您的用例的适用表达式应为ng-repeat="(key, value) in expression"。 expression应在代码中用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>

你的标记可以使用很多改进，但一次只有一件事 - 我建议你阅读文档。

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

2 个答案: