欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

如何保持CSS类不受Angular控制器的影响

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

在Angular(以及一般情况下)中,我非常喜欢将视图逻辑保留在我的控制器之外,而且我认为没有发生这种情况的地方是CSS类和ng-class的使用。

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

<p ng-class="{{active}}">Class applied!</p><script>
    function MySimpleCtrl() {
        $scope.active = 'active';
        ...

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

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

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

1、字符串值(类的名称)

2、字符串数组(要应用的类)

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

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

ng-class="{object of key/value pairs}[expression to evaluate]"

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

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

这是一个简单的例子:

<p ng-class="{true: 'active', false: 'inactive'}[isActive]">
    Class applied
!</p><script>
    function MySimpleCtrl() {
        $scope.isActive = true;

如果您正在使用某种条件表达式(即切换),那么您可以使用另一种非常相似的语法:

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

此处,如果selected为真,则将应用选定的类,blue类也一样。Angular将应用尽可能是真实的,因此您可以将类设置为selected和blue。 本文地址:http://itbyc.com/web/css3/20134.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1