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

【问题标题】：Does Angular accept properties with a hyphen in them?Angular 是否接受带有连字符的属性？
【发布时间】：2014-02-10 14:33:58
【问题描述】：

我正在构建我的第一个成熟的 Angular 应用程序，但遇到了一个有趣的怪癖。我有一个模型，它的数据结构是这样的：

{
    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 地址中的连字符吗？如果是这样，是否有一种简单的方法来进行数据转换？我从一个简单的$resource 工厂获取这些数据。

【问题讨论】：

没有“地址”属性，尤其是前面没有data.host.。如果您有一个无效的标识符作为键，请使用括号表示法：IP Addresses: {{data.host['ip-addresses']}}
是的，谢谢，我很抱歉，最初我对我拥有的代码进行了快速压缩，显然（可耻地）在发布之前没有对其进行测试 - 这是我没有使用的括号符号意识到我可以在模板中使用。谢谢！

标签： javascript ajax angularjs templates

【解决方案1】：

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

所以你必须使用['property-name'] 来访问它。

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

【讨论】：

完美！谢谢，我不知道我可以用括号引用，我现在觉得很傻。谢谢！

【解决方案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']}}

【讨论】：