如何使用 AngularJS 更改 css 样式？

Question

虽然我通常能够为网页制作 css 样式，但我尝试使用 AngularJS 对 css 进行的任何更改，即使使用 ng-style="xy"，似乎都不会改变页面上的任何内容。

这是我的代码：

<div id="tableScrollPanel">
    <table class="table">
        <thead>
        <tr>
            <th></th>
            <th ng-style="{
                    display: 'inline-block',
                    white-space: 'nowrap',
                    -webkit-transform: 'translate(0em, 0em) rotate(-90deg)',
                    -moz-transform: 'translate(0em, 0em) rotate(-90deg)',
                    -o-transform: 'translate(0em, 0em) rotate(-90deg)',
                    transform: 'translate(0em, 0em) rotate(-90deg)',
                    -webkit-transform-origin: '0em 0em',
                    -moz-transform-origin: '0em 0em',
                    -o-transform-origin: '0em 0em',
                    transform-origin: '0em 0em',
                    -ms-transform: 'none',
                    -ms-transform-origin: 'none',
                    filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)',
                    position: 'absolute',
                    bottom: '0em\9'
                    }" ng-repeat="(key,headline) in model.headlines" ng-class="headline.classes" data-ng-bind="headline.name">
                {{headline}}
            </th>
        </tr>
        </thead>

        <tbody>
        <tr data-ng-repeat="(key, row) in model.rows">
            <td data-ng-bind="row.title"></td>
            <td data-ng-repeat="(key2, column) in row.columns">
                <input type="text" data-ng-model="column.entry" ng-disabled="column.disabled"
                       ng-change="changeEntry(key, key2)">
            </td>

        </tr>
        </tbody>
    </table>
</div>
<div style="text-align: right">
    <button class="btn" data-ng-click="saveChanges()">Speichern</button>
</div>

Answer 1

您必须对带有- 的属性使用简单的引用

所以对于空白应该是这样的：

'white-space': 'nowrap'

Answer 2

从 ng-style 中取出 CSS 并创建一个 CSS 类并将其添加到 ng-class。

如果没有其他内容会更容易阅读。

你期望会发生什么？另外，你在第一个元素中使用 ng-repeat 做什么？