Question

我正在构建我的第一个完整的角度应用程序，并遇到了一个有趣的怪癖。我有一个模型的数据结构是这样的：

{
    id: "12345",
    host: {
        name: "someHostServer",
        ip-addresses: [
           "1.2.3.4",
           "10.11.12.13"
        ]
    }
}

我正在渲染一个页面，其中这个结构被分配给上下文中的“数据”，就像这样：

ID：{{data.id}}

主持人：{{data.host.name}}
IP地址：

<span ng-repeat="address in data.host.ip-addresses">
     {{address}}<br />
</span>

ID会显示，主机名会显示，但地址？没什么。这是因为ip-addresses中的连字符？如果是这样，有没有一种简单的方法来进行数据转换？我从一个简单的$resource工厂获得这些数据。

Answer 1

如果使用.（点）获取对象属性，则属性名称中不能包含-（连字符）。

因此，您必须使用['property-name']来访问它。

<span ng-repeat="address in data.host['ip-addresses']">
     {{address}}<br />
</span>

Answer 2

并不是它不接受带有连字符的属性，而是它是无效的json，无论角度如何都会在javascript中出错。

如果您的数据是这样的：

{ id: "12345", host: { name: "someHostServer, "ip-addresses": [ "1.2.3.4", "10.11.12.13" ] } }

没关系，你可以通过这样做在chrome dev中尝试：

console.log({ "name": "someHostServer", "ip-addresses": [ "1.2.3.4", "10.11.12.13" ] });

这样做：

console.log({ id: "12345", host: { name: "someHostServer, ip-addresses: [ "1.2.3.4", "10.11.12.13" ] } });

导致错误。

一旦你做了这个改变，看起来你的标记应该是

IP Addresses: {{data.host['ip-address']}}

Angular是否接受带有连字符的属性？

2 个答案: