Angular.js - Changing an Element's CSS by clicking another Element

Question

I'm very new to Angular.js.

I'm grabbing images from a MySQL database and printing them to the screen like this:

while ($row = mysqli_fetch_array($result)){
                echo "<div id='img_div' ng-click='popup()'>";

On the echoed div, I have an ng-click. In app.js, this is currently what I have for the ng-click (purely for testing purposes:

$scope.popup = function() {

// assign a message to the $scope
$scope.message = 'Hello World!';

// use the $log service to output the message in a console
$log.log($scope.message);

};

What I'd actually like to have in that ng-click function is:

modal.style.display = "block";

I'd basically like to set the CSS of another element.

Will I need to apply ng-style in order to do this?

in your case it could be just achievable by using ng-show/ng-hide directive.. — Pankaj Parkar
– Pankaj Parkar, Commented May 10, 2017 at 18:22

couzzi · Accepted Answer · 2017-05-10 18:06:08Z

1

Using ng-style with a $scope variable you can control the display property (or any for that matter):

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.display = 'inline';
  $scope.setDisplayValue = function(value){
    $scope.display = value;
  }
});

div#test {
  
  background: red;
  
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div id="test" ng-style="{'display' : display}">{{display}}</div>
    <hr />
    <button ng-click="setDisplayValue('inline')">Set Display to inline</button>
    <button ng-click="setDisplayValue('block')">Set Display to block</button>
  </body>

</html>

Plunker mirror: http://plnkr.co/edit/4vR4SEnz7iX81CWIrShw

answered May 10, 2017 at 18:06

couzzi

6,3563 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

rpivovar Over a year ago

Thank you @couzzi , giving this a try now.

couzzi Over a year ago

My pleasure. If it works for you, please mark this answer. :)

rpivovar Over a year ago

My apologies for the lateness on this. I tried to implement this as best as I could but am receiving "Unexpected End of Expression" errors. I have rewritten my echoed statement as: echo "<div id='img_div' ng-click='setDisplayValue('block)'>";

rpivovar Over a year ago

And the controller in my app.js

myApp.controller('screeningsController', ['$scope', '$log', function($scope, $log){ 	 	$scope.display = 'none';  	$scope.setDisplayValue = function(value){     	$scope.display = value; 	}; }]);

couzzi Over a year ago

provide a link to a plnkr.co or jsfiddle.net demo

|

Collectives™ on Stack Overflow

Angular.js - Changing an Element's CSS by clicking another Element

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related