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属性（或任何相关内容）：

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.display = 'inline';
  $scope.setDisplayValue = function(value){
    $scope.display = value;
  }
});

＆＃13;

div#test {
  
  background: red;
  
}

＆＃13;

<!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>

＆＃13;

Plunker镜子：http://plnkr.co/edit/4vR4SEnz7iX81CWIrShw

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

1 个答案: