AngularJS
директива ng-class

Три типа выражений ng-класса

Угловой поддерживает три типа выражений в директиве ng-class .

1. Строка

<span ng-class="MyClass">Sample Text</span>

Указание выражения, которое оценивается в строке, указывает, что Angular обрабатывает его как переменную $ scope. Угловое будет проверять масштаб $ и искать переменную под названием «MyClass». Любой текст, содержащийся в «MyClass», станет фактическим именем класса, которое применяется к этому <span> . Вы можете указать несколько классов, разделив каждый класс на пробел.

В контроллере у вас может быть определение, которое выглядит так:

$scope.MyClass = "bold-red deleted error";

Угловой будет оценивать выражение MyClass и находить определение $ scope. Он применит три класса «полужирный», «удаленный» и «ошибка» к элементу <span> .

Указание классов таким образом позволяет легко изменить определения классов в вашем контроллере. Например, вам может потребоваться изменить класс на основе других пользовательских взаимодействий или новых данных, загружаемых с сервера. Кроме того, если у вас есть много выражений для оценки, вы можете сделать это в функции, которая определяет окончательный список классов в переменной $scope . Это может быть проще, чем пытаться сжать многие оценки в атрибут ng-class в вашем HTML-шаблоне.

2. Объект

Это наиболее часто используемый способ определения классов с использованием ng-class поскольку он легко позволяет вам определять оценки, определяющие, какой класс использовать.

Укажите объект, содержащий пары ключ-значение. Ключ - это имя класса, которое будет применяться, если значение (условное) оценивается как истинное.

<style>
    .red { color: red; font-weight: bold; }
    .blue { color: blue; }
    .green { color: green; }
    .highlighted { background-color: yellow; color: black; }
</style>

<span ng-class="{ red: ShowRed, blue: ShowBlue, green: ShowGreen, highlighted: IsHighlighted }">Sample Text</span>

<div>Red: <input type="checkbox" ng-model="ShowRed"></div>
<div>Green: <input type="checkbox" ng-model="ShowGreen"></div>
<div>Blue: <input type="checkbox" ng-model="ShowBlue"></div>
<div>Highlight: <input type="checkbox" ng-model="IsHighlighted"></div>

3. Массив

Выражение, которое оценивает массив, позволяет использовать комбинацию строк (см. № 1 выше) и условные объекты (# 2 выше).

<style>
    .bold { font-weight: bold; }
    .strike { text-decoration: line-through; }
    .orange { color: orange; }
</style>

<p ng-class="[ UserStyle, {orange: warning} ]">Array of Both Expression Types</p>
<input ng-model="UserStyle" placeholder="Type 'bold' and/or 'strike'"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

Это создает поле ввода текста, привязанное к переменной области видимости UserStyle которая позволяет пользователю вводить имена (имена) любого класса. Они будут динамически применяться к элементу <p> типу пользователя. Кроме того, пользователь может щелкнуть по флажку, привязанным к данным, к переменной области warning . Это также будет динамически применяться к элементу <p> .