Pseudoelement in css with ng-class

Question

Pseudoelement in css with ng-class

Navigation

#1 by (1 votes)

0

As I can use the Pseudoelementos with ng-class I want to make the class .timeline:after have a background-color: #D8D8D8; when the variable $scope.fax is activated. The idea is that the line and the circle change color, how the text changes I tried to do something like: ng-class="{'timeline:after' : fax}"

PD: This code can be copied and executed in your ID and it works perfectly, I appreciate any help and recommendation.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Angular Material style sheet -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
    <title></title>

    <!-- Jquery -->
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

    <!-- Angular js -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>

</head>
<body>

        <script>
        var app = angular.module("myApp", ['ngMaterial']); 
            app.controller("myCtrl", function($scope) {
                $scope.toggleSi = function(sector) {
                $scope.fax = true;
                $scope.estado = sector.estado;
            }

            $scope.lst = [
            {item:'banana', estado: 'disponible'}
            ]
        });
        </script>

        <style type="text/css" media="screen">
            .timeline {
                position: relative;
            }
            .timeline:after {
                content: '';
                position: absolute;
                width: 2px;
                background-color: #D8D8D8;
                top: 0;
                bottom: 0;
                left: 8px;
            }
            .timeline .right:after {
                left: 16px;
            }
            .timeline .container {
                position: relative;
            }
            .timeline .container:after {
                content: "";
                position: absolute;
                width: 18px;
                height: 18px;
                left: 0px;
                background-color: white;
                border: 2px solid #D8D8D8;
                top: 15px;
                border-radius: 50%;
                z-index: 1;
            }
            .algo {
                color: red !important;
            }
        </style>

    <div ng-app="myApp" ng-controller="myCtrl">
        <div md-whiteframe="2" layout="row">
                <div layout="column" flex="50">
                    <md-card ng-repeat="sector in lst" ng-click="toggleSi(sector)">
                        <md-card-content>
                            <h2>{{ sector.item }}</h2>
                            <p>{{ sector.estado }}</p>
                        </md-card-content>
                    </md-card>
                </div>
                <div flex="40" class="timeline">
                    <div class="right container">    
                        <h3 style="color: #919191;font-size: 20px;" ng-class="{'algo' : fax}">Solicita el arrendamiento</h3>        
                        <md-content layout-padding layout-wrap  ng-if="fax">
                            <h2>{{ estado }}</h2>
                        </md-content>
                    </div>
                </div>
        </div> 
    </div>
    

    <!-- Angular Material requires Angular.js Libraries -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>

    <!-- Angular Material Library -->
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
</body>
</html>

javascript jquery angularjs

asked by zerokira 04.10.2017 в 21:19

source

1 answer

Error Fetching http headers in soap php How to insert data from timepicker, textbox and all the contents of a datagridview? visual studio 2015

score 1 · Accepted Answer

I would do something like that, I would only assign a new class when $scope.fax is activated and it would be with that new class that would change the color of :after or :before as appropriate:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Angular Material style sheet -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
    <title></title>

    <!-- Jquery -->
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

    <!-- Angular js -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>

</head>
<body>

        <script>
        var app = angular.module("myApp", ['ngMaterial']); 
            app.controller("myCtrl", function($scope) {
                $scope.toggleSi = function(sector) {
                $scope.fax = true;
                $scope.estado = sector.estado;
            }

            $scope.lst = [
            {item:'banana', estado: 'disponible'}
            ]
        });
        </script>

        <style type="text/css" media="screen">
            .timeline {
                position: relative;
            }

            .timeline:after {
                content: '';
                position: absolute;
                width: 2px;
                background-color: #D8D8D8;
                top: 0;
                bottom: 0;
                left: 8px;
            }

            .timeline_active:after {
                background-color: red;
            }

            .timeline .right:after {
                left: 16px;
            }

            .timeline .container {
                position: relative;
            }

            .timeline .container:after {
                content: "";
                position: absolute;
                width: 18px;
                height: 18px;
                left: 0px;
                background-color: white;
                border: 2px solid #D8D8D8;
                top: 15px;
                border-radius: 50%;
                z-index: 1;
            }

            .timeline_active .container:after {
                border: 2px solid red;
            }

            .algo {
                color: red !important;
            }
        </style>

    <div ng-app="myApp" ng-controller="myCtrl">
        <div md-whiteframe="2" layout="row">
                <div layout="column" flex="50">
                    <md-card ng-repeat="sector in lst" ng-click="toggleSi(sector)">
                        <md-card-content>
                            <h2>{{ sector.item }}</h2>
                            <p>{{ sector.estado }}</p>
                        </md-card-content>
                    </md-card>
                </div>
                <div flex="40" ng-class="['timeline', {'timeline_active':fax}]">
                    <div class="right container">    
                        <h3 style="color: #919191;font-size: 20px;" ng-class="{'algo' : fax}">Solicita el arrendamiento</h3>        
                        <md-content layout-padding layout-wrap  ng-if="fax">
                            <h2>{{ estado }}</h2>
                        </md-content>
                    </div>
                </div>
        </div> 
    </div>


    <!-- Angular Material requires Angular.js Libraries -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>

    <!-- Angular Material Library -->
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
</body>
</html>

I hope you serve, greetings!