Struggling to implement CSS for second div onto selected item in the first div

Question

Struggling to implement CSS for second div onto selected item in the first div

As a beginner in Angular, I am seeking some guidance and examples.

In my code, there are two divs. One is created using ng-repeat with an ng-click function to detect the clicked item. The other div below has CSS properties like

style="width:100px;
float:left;
margin-top:-30px;
margin-left:-100px;">
<img src="../../../path to image" embedded.

My goal is to apply the CSS properties from the second div to the ng-clicked item. What would be the best approach for this? Any examples provided would be helpful. Here's a snippet of my code:

<div ng-repeat="p in package "> 
<div class="col-md-3 pack-align-lr cursor-poi ticket-top space-buy-pack active-pack " ng-click="testing(p)" >
    <span class="pack">{{p}}</span><span class="spaces-font">Spaces</span> 
</div>
 <div style="width:100px;float:left;margin-top:-30px;margin-left:-100px;"><img src="../../../path to image" class="eventclass"/>
</div> 
</div>

Thank you in advance.

javascript html angularjs css

Answer 1

Answer №1

It appears that you are looking to change the style of a related element when clicking on another div.
To achieve this, I recommend consolidating your CSS rules into a class like .selected-package.
Next, you can save the selected state in a variable upon clicking using ng-click, and then utilize the ng-class directive to switch the styling of the second div with the selected-package class.

In conclusion, here is a basic example:

angular
  .module('uniqueApp', [])
  .controller('uniqueController', function($scope) {
    $scope.packages = [
      {name:'package 1'}, 
      {name:'package 2'},
      {name: 'package 3'}
    ];
  });

.selected-package {
  color: red;
}
[ng-click] {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="uniqueApp">
  <div ng-controller="uniqueController">
    <h1>My packages:</h1>
    <ul>
      <li ng-repeat="p in packages">
        <div ng-click="p.selected = !p.selected">first div: {{p.name}}</div>
        <div ng-class="{'selected-package':p.selected}">second div (turns red when first div is clicked)</div>
      </li>
    </ul>
  </div>

</div>

Answer 2

It appears that you are looking to change the style of a related element when clicking on another div.
To achieve this, I recommend consolidating your CSS rules into a class like .selected-package.
Next, you can save the selected state in a variable upon clicking using ng-click, and then utilize the ng-class directive to switch the styling of the second div with the selected-package class.

In conclusion, here is a basic example:

angular
  .module('uniqueApp', [])
  .controller('uniqueController', function($scope) {
    $scope.packages = [
      {name:'package 1'}, 
      {name:'package 2'},
      {name: 'package 3'}
    ];
  });

.selected-package {
  color: red;
}
[ng-click] {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="uniqueApp">
  <div ng-controller="uniqueController">
    <h1>My packages:</h1>
    <ul>
      <li ng-repeat="p in packages">
        <div ng-click="p.selected = !p.selected">first div: {{p.name}}</div>
        <div ng-class="{'selected-package':p.selected}">second div (turns red when first div is clicked)</div>
      </li>
    </ul>
  </div>

</div>

Struggling to implement CSS for second div onto selected item in the first div

Answer №1

Similar questions

PHP Troubleshooting: Resolving Ajax Problems in Symfony 4

Comparing strings in AngularJS

Align Bootstrap list items vertically

Interact with an external JavaScript function using a button within a web application

Tips for creating an input box that only accepts floating point numbers:

Implementing clickable actions to add new entries in a React.js application (using Redux toolkit)

Obtain the chosen option from an HTML select element by utilizing JavaScript

Is there a way to customize the Webpack output to incorporate specific options solely for a particular bundle?

Starting a line series from the beginning of the y-axis on a bar chart using chart.js

Can we tap into the algorithm of curveMonotoneX in d3-shape?

Is it possible for jquery.find() to only target immediate children?

Using a variable as a URL parameter in a jQuery ajax request: tips and tricks

Stop JQuery from executing when an error is caught

Learn how to transfer and retrieve data in a different jade template using Node.js without relying on session management or query strings

Angular throwing "provider not found" error when attempting to inject service into controller

Gorgeous stew, precise match when using the "findAll()" function

Retrieve the value of data from the dataset

The use of jQuery ajax requests is leading to a refresh of the page

Utilize AngularJS's nested ng-repeat to showcase information from two distinct JSON strings simultaneously

What methods can I use to combine AngularJS, React, and Redux together?