如何在 AngularJS v1 的表达式中创建带有动态键的对象？

Question

我的尝试：

<div ng-class="{'test': true}">Static key works fine</div>
<div ng-class="{ ['te'+'st']: true }">How to "Create object with dynamic key in Angular expression"?</div>
<div ng-class="{ 'te'+'st': true }">Attempt #2</div>
<div ng-class="{ `te${'st'}`: true }">Attempt #3</div>

您可以在this plunk查看。

编辑 1：为了使 crystal 清楚：我不是寻找一种如何在元素上动态添加类的方法。上面的代码只是我想要实现的目标的一个最小示例 - 使用动态键 在 Angular expression 中构造一个对象。考虑 ng-class 只是一些将对象作为参数的任意指令，它仅用于演示和测试。

在 JavaScript (ES6) 中可以这样实现： {['te'+'st']: true} 生成对象（不是字符串） {test: true}.

在生产代码中，表达式的第一部分是变量，另一部分是字符串，条件（值）不是硬连接的true，对象也不只由一个组成属性。但我认为这并不重要，因为问题是关于 ng 表达式中的对象和动态键，IMO 暗示它不仅限于字符串文字连接（它不会非常动态，对吧）。

Answer 1

不确定你想尝试什么，但如果你想要你正在做的事情，我会把它放在 class 而不是尝试使用 ng-class:

<div class="{{ 'te' + 'st' }}"></div>

这会吐出这个：

<div class="test"></div>

ng-class 如果您有 class 想要切换 on/off 则使用更多，但在上面的示例中它们都设置为 true 所以我可能会感到困惑，但它是可能不是你需要的。

Answer 2

查看 https://code.angularjs.org/1.4.9/docs/api/ng/directive/ngModel，特别是关于 绑定到 getter/setter

的部分

确实，您的 getter 可以 return 动态对象，但是您的示例将在运行时抛出异常，因为 ng-class 指令不接受任何对象作为值。

Answer 3

查看此示例可能会对您有所帮助http://plnkr.co/edit/MdZN42wJzNB2u8Zvds73?p=preview

<div ng-class="{ {{'te'+'st'}} : true }">How to "Create object with dynamic key in Angular expression"?</div>

如何在 AngularJS v1 的表达式中创建带有动态键的对象？

How to create an object with dynamic keys in expression of AngularJS v1?

expression

angularjs