I've used AngularJS's ng-repeat to display a list of <div> elements.
When I select one <div> (div1), its background color changes to blue. If I then click on another <div> (div2), div1's background returns to white and div2's background turns blue.
This is the HTML code:
<div ng-repeat="folder in vm.folders track by $index" >
<span>{{folder.name}}</span>
</div>
let myApp = angular.module("myApp",[]);
myApp.controller("myController",function($scope){
$scope.changeIndex = function(index){
$scope.selectedItem = index;
}
});.blue{
color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<div ng-repeat="item in [10, 20, 30, 40] track by $index">
<div ng-class="{blue: selectedItem==$index}" ng-click="changeIndex($index)">{{item}}</div>
</div>
</body>Coding Example
<div ng-repeat="element in vm.elements track by $index" ng-click="setSelected($index)" ng-class="{active : $index === selectedElement }">
<span>{{element.name}}</span>
</div>
Scripting Logic
$scope.selectedElement = null;
$scope.setSelected = function(selected) {
$scope.selectedElement = selected;
}
Styling Details
.active {
background-color: blue;
}
To ensure that each div retains information on the last one clicked, it's recommended to assign a function to each div that saves the id of the last clicked div. Using the ng-class directive, you can then apply a blue-background class to the currently selected div.
$scope.setCurrent = function(index){
$scope.currentId = index;
}
<div ng-repeat="folder in vm.folders track by $index" ng-click="setCurrent($index)" ng-class="{selected : currentId == $index}" >
<span>{{folder.name}}</span>
</div>
Recently starting with AngularJs, I am honing my skills by developing a single page Todo Application. However, I have encountered an issue while trying to load a localStorage factory that I intend to use for this project. Currently, I am stuck on the error ...
I need to customize a UI grid by merging some middle columns to achieve the following layout: Name | Address | Comment | Job | College | Married ---------------------------------------------------------- Keshvi | India | New | Not applicable ...
When loading a page, I have created a div that is displayed. Here is the code: <div ng-show="load" class="rb-animate-time rb-animate-hide rb-load"> <div class="text">Hello world</div> </div> <div ng-init="load = false">&l ...
It would be great if bootstrap had a built-in feature where it automatically assigns the wrapper div of any item with a height based on the height of the largest div. In this example on JSFiddle, you can see that I have different heights for the video-ite ...
Embarking on my first chrome extension journey, I have been developing a password manager app that offers enhanced functionalities beyond the default chrome password manager. A recent request from a client has come in, asking me to gather all passwords fr ...
When attempting to scrape data from a table using BeautifulSoup, the issue I'm running into is that the scraped data appears as one long string without any spaces or line breaks. How can this be resolved? The code I am currently using to extract text ...
I'm currently using Quasar to develop a Vue SPA web app/page. For this project, the web app will only run by clicking on the index.html file generated by the Quasar packager. This package will not be distributed online or hosted on any domain. My mai ...
When a link is clicked, I am trying to locate the nearest div element that has an id. In this specific scenario, the target divs would be either #Inputs or #Stages. For example, if Page1 through 4 is clicked, I want to store the id #Inputs in a variable. ...
Hello everyone, I'm new to this platform called Stack Overflow. I need some help with my quiz reset button. It doesn't seem to be working as intended. According to my code, when the reset button is clicked at the end of the quiz, it should bring ...
My journey with Solr has been enlightening, but I've hit a bump in the road. When querying Solr using: curl "http://localhost:8983/solr/myCollection/select?q=*:*&wt=json&rows=0" I receive a webpage displaying the JSON response. However, the ...
In my current project for an online course, I am utilizing sass to style everything. The compilation process completes successfully without any errors, but unfortunately, the browser does not display any of the styles. The styles folder contains five file ...
My technology stack includes angular.js for the front-end, node.js for server-side operations, and PostgreSQL for managing my database. Currently, I have a list of values stored in the database: https://i.sstatic.net/TuO6B.png Upon checking the controll ...
I am looking to iterate through a collection of divs, as mentioned below. Each object in the list will have content-data and a link to an image. The code provided shows individual entries for each list item, but I would like to retrieve it from the angular ...
I'm feeling lost on where to begin with this. I am working with an AngularJS form and I need it to add the data it sends to a json file. I understand that AngularJS is client-side, so my main issue lies in figuring out how to manage the data being sen ...
Currently, I am working on developing a form that will enable customers to input their order information. This form includes a selection list for payment methods, with three available options. If the user chooses either credit or debit card as the paymen ...
For a personal project I am currently working on, I decided to experiment with setting background colors using Javascript. However, I have encountered an issue where my CSS code that changes the hover property does not seem to work after implementing the J ...
My background image, which is overlaid with a gradient, does not show up on Safari (although it works perfectly on Chrome). body{ background:linear-gradient(rgba(0, 0, 0, 0.95),rgb(0, 0, 0, 0.95)),url("https://www.w3schools.com/cssref/img_tree.gif" ...
I am currently working on a local website using Python to create a button that will open the door to my room from my phone through a Raspberry Pi. I have already created a Python program that successfully opens the door, but now I am trying to implement an ...
Could someone assist me with hiding the Widget-chat? I keep getting an error that the property of style is null. Any help would be greatly appreciated. Thank you in advance. document.getElementById("chat-widget").style.display='none'; ...
I have a collection of unique identifiers that I need to send to the server. Most online solutions suggest passing these identifiers as query parameters in the URL, but this approach is not ideal for me as there could be a large number of identifiers invol ...