怎么保持CSS类不受Angular控制器的影响

这篇文章主要讲解了“怎么保持CSS类不受Angular控制器的影响”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么保持CSS类不受Angular控制器的影响”吧！

　　对于ng-class你可能不太熟悉，它是一个特殊的指令，允许绑定表达式并将它们作为元素的类放置。ng-class的一个非常常见的用途是这样的：

　　<png-class="{{active}}">Classapplied!</p><script>

　　functionMySimpleCtrl(){

　　$scope.active='active';

　　...

　　所以在控制器中我们设置应该显示的特定类;所以假设我们有一个类“inactive.”&mdash;&mdash;我们简单地将$scope.active变量设置为“inactive”，我们最后在视图中设置了类。

　　但ng-class甚至比那更好用：

　　ng-class接受三种不同类型的值：

　　1、字符串值（类的名称）

　　2、字符串数组（要应用的类）

　　3、要评估的对象+表达式

　　其中选项3的语法看起来像这样

　　ng-class="{objectofkey/valuepairs}[expressiontoevaluate]"

　　基本上，ng-class计算表达式（在方括号中），然后使用它作为对象的键；键相关的值是应用的类。

　　这允许我们将$scope.active值转换为真正的布尔值（这正是我们使用它的方式）&mdash;&mdash;控制器中没有视图逻辑，控制器更容易测试并且可以重用。

　　这是一个简单的例子：

　　<png-class="{true:'active',false:'inactive'}[isActive]">

　　Classapplied

　　!</p><script>

　　functionMySimpleCtrl(){

　　$scope.isActive=true;

　　如果您正在使用某种条件表达式（即切换），那么您可以使用另一种非常相似的语法：

　　ng-class="{'selected':isSelected,'blue':isBlue}"

　　此处，如果selected为真，则将应用选定的类，blue类也一样。Angular将应用尽可能是真实的，因此您可以将类设置为selected和blue。

感谢各位的阅读，以上就是“怎么保持CSS类不受Angular控制器的影响”的内容了，经过本文的学习后，相信大家对怎么保持CSS类不受Angular控制器的影响这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！