<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js" data-semver="3.10.0" data-require="lodash.js@*"></script>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<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>
<div ng-class="{test: true}">Static key still works fine</div>
</body>
</html>
'babel';
angular.module('app', []);
body {
font-size: 200%;
}
div {
border: 1px solid;
margin: 0.1em;
}
.test {
color: lightgreen;
background: black;
padding: 0.25em;
font-size: 150%;
}