Angular.js - 通过单击另一个元素更改元素的 CSS

Question

我对 Angular.js 很陌生。

我正在从 MySQL 数据库中抓取图像并将它们打印到屏幕上，如下所示：

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

在回显 div 上，我有一个 ng-click。在 app.js 中，这是我目前拥有的 ng-click（纯粹用于测试目的：

$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);

};

我真正想要在那个 ng-click 函数中拥有的是：

modal.style.display = "block";

我基本上想设置另一个元素的 CSS。

我需要应用 ng-style 才能做到这一点吗？

Answer 1

将 ng-style 与 $scope 变量一起使用，您可以控制 display 属性（或任何与此相关的变量）：

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="angular.js@1.5.x" 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 镜像：http://plnkr.co/edit/4vR4SEnz7iX81CWIrShw

Angular.js - 通过单击另一个元素更改元素的 CSS

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

angularjs

angularjs-ng-click

ng-style