什么是 ng-style 指令？
ng-style 是 Angular 框架中的一个内置指令，用于动态地设置元素的样式。通过 ng-style 指令，我们可以在应用运行时重新计算样式表，并动态地更新应用的外观。
下面是 ng-style 指令的语法：
<div ng-style="{ key1: value1, key2: value2, ... }"></div>其中，key 是样式属性名称，value 是样式值。例如，我们可以使用如下代码将 div 元素的背景色设置为红色：
<div ng-style="{ 'background-color': 'red' }"></div>使用场景
在 Angular 应用中，我们经常会遇到需要动态修改元素的样式的情况。例如，当用户输入的值超过一定范围时，需要将输入框的背景色改变；当用户选择了某个选项卡时，需要将对应的选项卡设置为选中状态。这些需求都可以使用 ng-style 指令来实现。
以下是一些实际的应用场景：
1. 根据用户输入修改样式
在表单输入框中，我们可以使用 ng-style 指令来根据用户输入的值来修改样式。例如，当用户输入的文字长度超过指定的值时，将输入框背景色设为红色，表示输入不合法。
<input type="text" ng-model="value" ng-style="{ 'background-color': value.length > 10 ? 'red' : 'none' }">2. 根据选中状态修改样式
在选项卡组件中，我们可以使用 ng-style 指令来根据当前选中的选项卡来修改样式。例如，当用户选中某个选项卡时，将该选项卡字体颜色设为红色，表示当前处于选中状态。
<ul>
<li ng-repeat="tab in tabs" ng-click="selectTab(tab)" ng-style="{ color: tab.active ? 'red' : 'black' }">{{ tab.title }}</li>
</ul>3. 根据数据动态渲染样式
在数据列表中，我们可以使用 ng-style 指令来根据数据中的某些属性来修改样式。例如，当数据中某个值为 true 时，将该行的背景色设为绿色，表示数据有效。
<table>
<tr ng-repeat="item in items" ng-style="{ 'background-color': item.valid ? 'green' : 'none' }">
<td>{{ item.name }}</td>
<td>{{ item.value }}</td>
</tr>
</table>示例代码
下面是一个完整的示例代码，展示了如何在 Angular 应用中使用 ng-style 指令来根据用户输入修改样式。在该示例中，我们创建了一个表单输入框，当用户输入超过 10 个字符时，将输入框背景色设为红色。
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
--------------- ---------------
-------
------
---- -----------------------
------ ----------- ---------------- ----------- ------------------- ------------ - -- - ----- - ------ ---
------
------- ---------------------------------------------------------------------------------
--------
--------------------- ---
--------------------- -------- -------- -
------------ - --
--
---------
-------
-------结论
ng-style 指令是 Angular 框架中非常有用的一个指令，可以让我们动态地生成元素样式，实现更加灵活的应用开发。通过本文的介绍和示例代码，相信读者已经对该指令有了一定的了解，可以在自己的应用中灵活地运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6732c3860bc820c5823ebb13