можно ли объединить несколько ng-классов

можно ли избежать повторения кода здесь, заменив ng-switch на ng-class.

<li ng-repeat="el in elm.required">
    <span ng-switch on="el.type" >
        <i class="icon-file" ng-switch-when="upload" tooltip="{{el.name}}" ng-class="{'muted':!el.completed}"></i>
        <i class="icon-check" ng-switch-when="checkbox" tooltip="{{el.name}}" ng-class="{'muted':!el.completed}"></i>
        <i class="icon-calendar" ng-switch-when="date" tooltip="{{el.name}}" ng-class="{'muted':!el.completed}"></i>
        <i class="icon-pencil" ng-switch-when="text" tooltip="{{el.name}}" ng-class="{'muted':!el.completed}"></i>
        <i class="icon-envelope" ng-switch-when="email" tooltip="{{el.name}}" ng-class="{'muted':!el.completed}"></i>
    </span>
</li>

с чем-то вроде этого (не работает, потому что есть две инструкции ng-класса):

<li ng-repeat="el in elm.required">
    <i tooltip="{{el.name}}" ng-class="{upload:'icon\-file', checkbox:'icon\-check', 'date':'icon\-calendar', text:'icon\-pencil', 'email':'icon\-envelope'}[el.type]" ng-class="{'muted':!el.completed}" ></i>
</li>

angularjs ng-class
person François Romain    schedule 25.06.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вместо того, чтобы делать версию Angular, вы можете просто создать классы css .upload .checkbox и т. д., которые сопоставляются с icon-*

<li ng-repeat="el in elm.required">
    <i tooltip="{{el.name}}" class="{{el.type}}" ng-class="{'muted':!el.completed}" ></i>
</li>

Пример jsfiddle

person Mark Coleman    schedule 25.06.2013