angularjs - 使用 AngularJs 读取复杂对象

Question

function ListServers($scope) {
    $scope.count = function() {
        return Object.keys(this.response.servers).length;
    };
    $scope.response={
        "status":true,
        "servers": {
            "vegas.domain.org": {
                "nickname":"Vegas VPS",
                "active":true,
                "frequency":5,
                "testers":['vegas','new-york'],
                "ports":{
                    "http":80,
                    "https":443
                }
            },
            "gains.domain.com": {
                "nickname": "Gains Shared Server",
                "active":false,
                "frequency":15,
                "testers":['vegas'],
                "ports":{
                    "http":80
                }
            }
        }
    };
}

这是我的 JS。包含 Angular JS 后我的 HTML 部分是这样的：

<div ng-app>
    <h1>Test Page</h1>
    <div ng-controller="ListServers">
        <span>Success? {{response.status}}</span><br/>
        <span>{{count()}} servers found:</span>
        <ol>
            <li ng-repeat='server in response.servers'>
                <strong>Nickname: </strong>{{server.nickname}}<br/>
                <strong>Is Active: </strong>{{server.active}}<br/>
                <strong>Freuency: </strong>{{server.frequency}} seconds<br/>
                <strong>Tests From: </strong>
                <ul>
                    <li ng-repeat='tester in server.testers'>
                        {{tester}}
                    </li>
                </ul>
                <strong>Ports: </strong>
                <ul>
                    <li ng-repeat='port in server.ports'>
                        {{port}}
                    </li>
                </ul>
                <br/>
            </li>
        </ol>
    </div>
</div>

在这里，我<li ng-repeat='server in response.servers'>可以读取等的值。但我无法读取其本身的值。我期待价值vegas.domain.org和gain.domain.com。server.nicknameserver.frequencyserver

那么如何检索值呢？

Answer 1

用于ng-repeat="(key, value) in expression"迭代对象的键和值：

<li ng-repeat="(domain, server) in response.servers">
  <strong>Domain: </strong>{{domain}}<br/>
  <strong>Nickname: </strong>{{server.nickname}}<br/>
  ...
</li>