I'm trying to style an embedded svg file within a span using ng-style based on its index. Can anyone help me figure out how to do this?
<li ng-repeat="menuItem in menuItems" class="menuitem" ng-class="{'smenuitem': ($index === menuselected)}">
<span class="svgcont2"
ng-include="menuItem.iconurl"
ng-style="getFill($index)"></span>
<span class="listtext">{{ menuItem.name }}</span>
</li>
ng-include is like a tool for inserting content easily. Unfortunately, it doesn't have the functionality to achieve what we want directly. An alternative approach would be to create a directive and use a scope variable such as sub-style within the directive to set internal styles.
This is how you would call it:
<span class="svgcont2"
icon-url="menuItem.iconurl"
fill-info="getFill($index)"></span>
The directive implementation:
app
.directive('svgcont2', function() {
return {
restrict: 'C',
scope: {
fillInfo: '='
},
templateUrl: function(elem, attrs) {
return attrs.iconUrl
}
};
});
In your directive template:
<svg style="{fill: fillInfo}">
Another method is to utilize styles. If your styling needs are uncomplicated, you can apply additional classes to the parent span element and pass them down to the children elements. Here's a brief example:
.svgcont2.fill div.childelement
{
//Your style here
}
A solution has been found! I proceeded by including a fill attribute on the span element, followed by implementing a CSS rule for the SVG to adopt the parent's fill color.
.svgcont2 svg {
fill: inherit;
}
As a beginner in the world of Node.js and JavaScript, I have been struggling to find a solution to my problem even after extensive searching. My current challenge involves sending a JSON object to a Node.js server with an array of 2 elements (longitude an ...
I'm attempting to develop tabbed navigation using my current HTML structure. My goal is to display book titles as tabs and book details BELOW the tabs. Check out this example: or view this: http://jsfiddle.net/syahrasi/Us8uc/ I cannot change the HTM ...
I'm encountering an issue with Protractor while trying to access a variable that stores the return value of "elements.all". As someone who is new to Protractor, I wasn't sure how to select elements by a custom attribute. Thankfully, I received so ...
As I delve into the world of node.js and sequelize, I am encountering a persistent error: /home/cbaket/test/test.js:9 .complete(function(err) { ^ TypeError: undefined is not a function at Object.<anonymous> (/home/cbaket/test/test.js:9: ...
I am working with a WordPress blog that has multiple pages with dropdown subpages on hover. However, I only want the main pages to have links, not the subpages. To achieve this, I am using some basic JavaScript. jQuery(document).ready(function(){ jQ ...
Imagine I have the characters: H, M, L I want to create sorted arrays like this: var array1 = [ "H", "M", "L", "L", "M", "H" ]; My goal is to avoid having more than one unique character in the first three and last three characters when using the shuffl ...
Currently, I am experimenting with the Aria template, a free Bootstrap-based template. My goal is to utilize the gallery feature without any accompanying text. However, even after removing the text from the lightbox, the white background persists. What I s ...
I want to track the links that users click on and display them in a box with an image and name of the page. Additionally, I would like to show how long the user spent on each page below the image. The images in the box should also be clickable links to the ...
I am currently working on a web page that generates a table with a green background labeled by an h2 element. The challenge I'm facing is ensuring that the h2 element extends horizontally as far as the user scrolls so that there is always a green bar ...
I am currently developing an application similar to the threeJs editor. In this project, I have implemented four different cameras, each with unique names and positions. Here is an example of one of the cameras: cameras['home'] = new THREE.Combi ...
Within my state, I have properties named start and end which store dates. Whenever any other part of the state is modified, the subscription for these start and end dates is triggered. Here is the subscription implementation: this.subs.sink = this.store ...
Is there a way to enhance my JavaScript code like this: $(window).scroll(function() { if ($('#sec1').isVisible()) { $('.js-nav a.m1').addClass('active'); } else { $('.js-nav a.m1').removeClas ...
This particular webpage layout showcases articles contributed by users. Our platform allows users to publish their articles, which are added to the top of the page instantly while also being saved to the database via AJAX. <div class = 'article-wr ...
Currently, I am facing an issue with updating a user's email on a page. The div refreshes upon submission as intended, but the database is not being updated, and I can't figure out why. My layout consists of a single page where clicking a menu l ...
Imagine a scenario where there is a MySQL database connected to NodeJS and EJS. The database contains three categories: OK, WARNING, and FALSE. How can the total count of each category be obtained from the database? An attempt was made by implementing th ...
I have been working on setting options for dates like yesterday, today, and tomorrow. I have implemented the following code which is functioning properly, but it is not displaying yesterday's date. I want today's date to be selected and also disp ...
How can I create interdependent logic for checkbox sections in a form to filter based on all selections? I am looking for help with my code snippet that showcases checkboxes controlling the visibility of table rows: $(document).ready(function() { $(" ...
I am seeking a solution for toggling a box (div) with slide-out animation and then sliding back in animation (in reverse) upon button press. My requirement is to have no animations during the initial page render. While I can successfully slide the box to ...
Hey there, I have a situation where I have two buttons - one to add a dog to the dog list and another to clear the entire list. Both buttons are functioning properly, but I'm having an issue with only the OnSubmit button refreshing the page. The dog ...
Here is a snippet of HTML code that I'm working with: <!-- Toggle show hide --> <ng-container *ngFor="let plateValue of plateValues; let i=index"> <button (click)="toggle(plateValue)">{{i}}. {{ btnText }}</button> ...