Angular.js -通过单击另一个元素更改元素的CSS
Angular.js -通过单击另一个元素更改元素的CSS
提问于 2017-05-10 17:23:48
我对Angular.js非常陌生。
我从MySQL数据库中获取图像并将它们打印到屏幕上，如下所示：
while ($row = mysqli_fetch_array($result)){
echo "<div id='img_div' ng-click='popup()'>";在呼应的div上，我有一个ng-点击。在app.js中，这是我当前用于ng单击的内容(纯粹用于测试目的)：
$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单击函数中获得以下内容：
modal.style.display = "block";我基本上想设置另一个元素的CSS。
为了做到这一点，我需要应用ng风格吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-05-10 18:06:08
使用带有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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43899055
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号