如何使用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樣式中刪除CSS並創建一個CSS類，然后將其添加到ng-class中。

如果沒有別的，那將更容易閱讀。

您期望發生什么？ 另外，您在th元素中使用ng-repeat做什么？