After creating a list using divs, my goal is to modify only the background color of the selected div when a user makes a choice from the list.
I have accomplished this by defining two distinct CSS classes with the main difference being the background color, and then applying the appropriate style when a user selects a div.
Is there a way to alter only the background color without impacting the existing style using angularJS?
I am just diving into the world of AngularJS, so this assignment is a great learning opportunity for me. I understand that my approach may not be perfect or exactly what you are looking for. Please review and let me know if there is room for improvement.
Currently, I have tackled this task by creating two distinct CSS classes with the only variance being the background color.
You could organize the background colors into separate classes and simply toggle between them while keeping everything else constant.
HTML
<div ng-app ng-controller="testCtrl" >
<div ng-repeat="item in items">
<div ng-class="item.class" ng-click="select(item)">{{item.text}}</div>
</div>
</div>
JS
function testCtrl($scope) {
$scope.items = [
{ text:'List item 1', class:'default normal' },
{ text:'List Item 2', class:'default normal' },
{ text:'List Item 3', class:'default normal' }
];
$scope.select = function(item) {
angular.forEach($scope.items, function (value, key) {
if(value == item) {
value.class = 'default select' // selected
}
else {
value.class = 'default normal' // restored
}
});
};
}
CSS
.default { font-size: 25px; padding: 10px; margin-bottom: 5px; }
.normal { background: yellow; }
.select { background: cyan; }
Check out the JSFiddle demonstration here.
Feel free to use this solution for adding an active class to a clicked item:
app.controller('MainCtrl', function($scope) {
$scope.items = [
'Page One',
'Page Two',
'Page Three'
];
$scope.selected = 0;
$scope.active = function(index) {
$scope.selected = index;
}
});
<li ng-repeat="item in items">
<a ng-class="{ active : $index == selected }" ng-click="active($index)">{{ item }}</a>
</li>
After installing the flat-responsive theme, I noticed that it includes Font Awesome CSS. Additionally, there is a reference to this in the functions.php file: wp_enqueue_style( 'flat_responsive_font-awesome', get_template_directory_uri() . &apos ...
My Bootstrap 4 Website contains the following HTML code snippet: <div class="container"> <div class="row"> <div class="col-md-6 mx-auto> <h2>Example heading text</h2> <h6>Example subh ...
I'm currently working on a shape-based menu, but I'm encountering issues specifically in Safari. The layout gets distorted in Safari, and I'm struggling to understand the cause. Interestingly, when I use CSS clip-path without the SVG tag, it ...
Is there a way to incorporate a feature on a website that displays clicked xy points as text, allowing them to be easily copied and pasted? ...
Is there a way to clear the memory of a previous module in my app that I won't be using after routing to a different location? For instance, let's say my main Angular module is "WebApp" which has dependencies on modules like "catalogApp", "Payme ...
Looking to automate the process of capturing a picture from a webcam once access is granted, and then saving it without any user intervention. I've managed to capture the image but struggling with: A) Automating the capture process B) Saving the ca ...
My concern revolves around the transform: scale property. I am trying to achieve a gradual zoom effect on my background when hovered over, without affecting the text content. I have omitted browser prefixes for brevity. Below is the CSS code: #cont-nl { ...
Just getting started with AngularJS and trying to figure out how to tackle this issue. I have set up the following route: name: "Tracker", url: "/tracker/:period", and I have 3 distinct states for which I've created 3 separate functions to facilit ...
I am trying to achieve a functionality where clicking a div will move another div to the right by 0, and on clicking the div again, the second div will move to the right by -200. However, I am facing issues getting it to work properly. $(document).ready(f ...
Hi there! I am having an issue with my sidebar not appearing correctly when I click on the toggle button. It seems to be moving to the side, but the sidebar itself is blank or transparent. I suspect that the problem lies within my JavaScript file. As a beg ...
I've been experimenting with creating an inner shadow effect on an image, but I can only seem to achieve an outer shadow. Just for clarification, .showSlide is a div element. .showSlide { display: block; width:100%; height:350px; } .showSlide img { ...
Seeking assistance in creating a triangular shape using CSS within a rectangular division. Grateful for any guidance provided. ...
I am currently designing a navigation bar inspired by the layout on the EA GAMES website. While it functions perfectly in Chrome, I am encountering significant display issues in Internet Explorer. Any suggestions on how to troubleshoot and resolve this pro ...
I successfully added a node, but I forgot to include the hover function of the node in my application. The hover function is not necessary, and I need it to work with ie8 compatibility. Here's my HTML: <div id="appendCell" style="color:green; colo ...
Perhaps this question may sound naive, as I don't have much experience with server-side operations. I am currently developing an Angular web application that will utilize nodeJS on the backend. I want to have the server (Node.exe) installed directly ...
Currently, I am utilizing the VMenu component from Vuetify which contains another Vuetify component called VDatePicker. The issue arises when clicking on a text field triggers the appearance of the calendar (VDatePicker). Normally, the VDatePicker componen ...
Currently, I am working on a small gallery and have successfully implemented Salvattore (similar to Masonry). However, a challenge has arisen when resizing the web page - the padding remains at 10px instead of reducing to 5px as desired. The goal is to e ...
I'm currently working on an Angular JS application and receiving text from the server that needs to be displayed on my website. The text received from the server is: "My name is <b> John </b>" with b tags. Unfortunately, when I display ...
After spending time studying protractor and writing tests for our development web app, I am now looking to integrate these tests into our continuous integration process. It is crucial that if any of the tests fail, the deployment to production should not p ...
I am working on a page that utilizes server-side datatables and I want to implement a custom pagination style on it: HTML <ul class="pagination pagination-danger"> <li class="page-item"><a class="page-link" href="#" data-original-title ...