用angularjs实现点击第一个div,让第二个div的背景也变成第一个div的背景

结构如下<divng-style="background-color:{{div1Bg}}"style="background:#039">div1</div><divn... 结构如下

<div ng-style="background-color: {{div1Bg}}" style="background:#039">div1</div>
<div ng-style="background-color: {{div2Bg}}">div2</div>
展开
 我来答
百度网友84fda0d
推荐于2016-05-27 · 超过47用户采纳过TA的回答
知道小有建树答主
回答量:79
采纳率:0%
帮助的人:66.1万
展开全部

你可以这样

<html ng-app>
<head>
</head>
<style>
    .red {
        background-color : red;
    }
    .orange {
        background-color: orange;
    }
</style>
<body>

<div ng-controller="TestController">
    <div ng-class="{true: 'red', false: 'orange'}[isChange]" ng-click="changeBgColor()">div1</div>
    <div ng-class="{true: 'red', false: 'orange'}[isChange]">div2</div>
</div>


<script src= "js/angular.js"></script>
<script Type= "text/javascript" >

    function TestController ($scope) {
        $scope.isChange = false;
        $scope. changeBgColor = function(row) {
            $scope.isChange = !$scope.isChange;
        } ;
    }

</script>

</body>
</html>
追问
我不能自己设定颜色,而是点击获取第一个div的背景颜色,将第二个div的背景改变成一样的,
追答

那你可以这样写:

<html ng-app>
<head>
</head>
<style>
    .red {
        background-color : red;
    }
    .orange {
        background-color: orange;
    }
</style>
<body>

<div ng-controller="TestController">
    <div class="orange" ng-click="changeBgColor($event.target)">div1</div>
    <div ng-style="{'background-color':mycolor }">div2</div>
</div>


<script src= "js/angular.js"></script>
<script Type= "text/javascript" >

    function TestController ($scope) {
        $scope.mycolor = "";
        $scope. changeBgColor = function(dom) {
            var oStyle = dom.currentStyle ? dom.currentStyle : window.getComputedStyle(dom, null);
            if (oStyle.getPropertyValue) {
                $scope.mycolor = oStyle.getPropertyValue("background-color"); //getPropertyValue
            } else {
                $scope.mycolor = oStyle.getAttribute("backgroundColor"); //getAttribute
            }
        };
    }

</script>

</body>
</html>
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式