I have a question regarding applying pseudo elements dynamically using Angular. I have a div element where I need to push data to the content attribute in CSS dynamically from my scope. How can I achieve this with Angular?
Here is a sample CSS:
.bar:before {
content: 'dynamic before text';
height: 20px;
}
.bar:after {
content: 'dynamic after text';
height: 20px;
}
<div class="bar"></div>
If you want to maintain flexibility, consider utilizing a custom data attribute:
.bar::before,
.bar::after
{
background-color: silver;
}
.bar::before
{
content: attr(data-before-content)
}
.bar::after
{
content: attr(data-after-content)
}<div class="bar" data-before-content="Hello" data-after-content="There">I have content</div>
<div class="bar" data-before-content="Hello">I have content</div>
<div class="bar" data-after-content="Different">I have content</div>
<div class="bar">I have content only</div>Utilizing dynamic html-attributes for the content is possible, as demonstrated here: JSBin: http://jsbin.com/sepino/edit?html,css,js,output
<!DOCTYPE html>
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script language="JavaScript">
angular.module('test',[]).controller('testController',function(){
this.textbefore = 'left ';
this.textafter = ' right';
});
</script>
<style>
.bar:before {
content: attr(data-textbefore);
height: 20px;
}
.bar:after {
content: attr(data-textafter);
height: 20px;
}
</style>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="testController as myCtrl">
<div class="bar" data-textbefore="{{myCtrl.textbefore}}" data-textafter="{{myCtrl.textafter}}">inside</div>
</body>
</html>
Utilize attributes within the content section to extract relevant information. Consider extracting necessary data from there.
span:before {
content: attr(data-info);
}
There is an easyui Tab that consists of 4 tabs. After receiving a response from the server, it may be necessary to hide or show some of the tabs. I attempted to remove the tabs initially and add them back later. However, the issue arises when the tabs are ...
It appears that I am still struggling to grasp the mechanism behind ng-repeat, $$hashKeys, and track by. Currently, in my project, I am working with AngularJS 1.6. The Issue: I have an array of complex objects that I want to display as a list in my view ...
I am attempting to send two values from a form to another PHP file using the ajax post method. One value is the current input box value, while the other is the value being typed into a different input box which functions as a search box. When I execute the ...
Hello everyone, I am fairly new to the world of PHP and AJAX, so please bear with me. I am currently attempting to retrieve MySQL results using AJAX. I have made some progress thanks to the information I have gathered from various sources on the internet. ...
Despite my efforts to find a solution, I'm struggling to come up with the right words or approach... here's the situation: In my ASP.NET MVC application, users scan inventory or package barcodes. Each scan triggers an async request, and a popup ...
Having some trouble retrieving a value from my firebase using angularjs and angularfire. Here is the code snippet from my controller: $scope.componentStatus = syncData("components/-JI_JgHxm0TEUEVjADJn/status"); console.log($scope.componentStatus); After ...
I have been encountering an issue while loading a javascript file using jquery. The code I am working with is as follows: // file application.js $.getScript("module.js", function(data, textStatus, jqxhr) { ... }); Everything seems fine so far. However, t ...
When it comes to testing object states, I am well-versed in using rspec in Ruby on Rails models. For instance, ensuring that a certain object meets certain expectations based on its prior state and a specific call. However, I am now faced with a new chall ...
With the usage of either JavaScript or Jquery, I possess an array that has been arranged in accordance with Start Date (coordinates): [{ elem: '<div id="task7">', startDate: 864, endDate: 999, order: 0 }, { elem: '<div id ...
After successfully loading 3 external models into my scene using the json loader, I am now trying to retrieve the name of the clicked model/object. Below is the code snippet that I used to load the models: var object_material = new THREE.MeshBasicMateria ...
Recently, I started working with Ionic and developed an application using it. Now, I am facing a challenge where I need to pass the value from the first page to the second page. To illustrate this more clearly, I have attached two photos. Here is the imag ...
Is there a way to set the input status to checked only on hover using CSS? Currently it is set on click, but I need it to happen on hover. How can I achieve this? Here is an example: ...
Seeking assistance with an ongoing challenge that has me stumped after days of searching I'm in the process of using Protractor for end-to-end testing of an AngularJS application While I have Protractor set up and running a test, whenever I try to r ...
There is a webpage named 'index.html' that consists of a left pane with various links and a right pane containing an iframe. Upon clicking a link from the left pane, the content of the page (not external sites or pages) should load inside the if ...
I've been trying to set a background image on a Kendo UI Textbox. It looks good until you hover over it. But when you do hover over it, this issue arises: How can I resolve this? The background image should remain in place even when I hover and cli ...
The code for displaying the logout button is as follows: <li class="dropdown" data-ng-if="userName"> <a href class="dropdown-toggle clear" data-toggle="dropdown" data-ng-show="userName"> </a> <!-- dropdown --> <u ...
Are there specific CSS selectors that can target Safari and Chrome exclusively? When attempting to target only Safari, I initially tried the following selector, but it seems to also target Chrome: html[data-useragent*="Safari"] { [...] } ...
I'm struggling with controlling CSS animations that I want to start only when the element becomes visible on the screen. The issue arises because I have a website with a total height of around 8000px and the element with the animation is located far d ...
I am working on an HTML page which has a form with various tags such as checkboxes, dropdowns, and more. When a button is clicked, I want to display the same form as plain text in a popup using jQuery dialog. Currently, I have managed to show the form in ...
I recently started a blog and wanted to streamline my design process by using Bootstrap to avoid having to deal with media queries. However, I encountered an issue where the <a> element was displaying as blue. I have another CSS file that is loaded a ...