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：为了清楚起见：我不正在寻找一种如何在元素上添加动态类的方法。上面的代码只是我想要实现的最小示例 - 使用动态密钥在Angular expression中构建对象。将ng-class视为将对象作为参数的任意指令，它仅用于演示和测试。

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

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

Answer 1

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

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

Answer 2

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

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

这将吐出这个：

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

如果您有要打开/关闭的课程，则使用更多ng-class，但在上面的示例中，它们都设置为true，因此我可能会感到困惑，但可能不是您需要的。< / p>

Answer 3

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

的部分

理想情况下，你的getter可以动态返回一个对象，但你的例子会在运行时抛出异常，因为ng-class diective不接受任何对象作为值。

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

3 个答案: