我是一名 Angular 新手,正在使用 CodePen 进行编码。当用户点击底部的导航按钮时,我想将另一个 div 的背景颜色更改为按钮对应的颜色。但我不确定最佳实现方式。以下是我目前的代码。
链接到 CodePen 编辑器:http://codepen.io/modDesigns/pen/YyKwGj
HTML 代码:
<div class="wrapper" ng-app="mobile">
<div class="phone">
<div class="page" ng-controller="Screen">
<div class="top_background" ng-style="{'background-color': changeScreen()}">
<i class="fa fa-signal sigs"></i>
<i class="fa fa-wifi sigs"></i>
<i class="fa fa-battery-full bats"></i>
<span class="times">11:44am</span>
<div class="home">
<h5 class="text-center"><i class="fa fa-user"></i> Account</h5>
</div>
<div class="navigation">
<div class="col-sm-3 homes" ng-style="{'background-color': '#C0392B'}" ng-click="changeScreen('#C0392B')">
<h4><i class="fa fa-home"></i></h4>
</div>
<div class="col-sm-3 shop" ng-click="" ng-style="{'background-color': '#E74C3C'}">
<h4><i class="fa fa-shopping-cart"></i></h4>
</div>
<div class="col-sm-3 feeds" ng-click="" ng-style="{'background-color': '#E67E22'}">
<h4><i class="fa fa-comment"></i></h4>
</div>
<div class="col-sm-3 settings" ng-click="" ng-style="{'background-color': '#F39C12'}">
<h4><i class="fa fa-cog"></i></h4>
</div>
</div>
</div>
</div>
</div>
Javascript
var app = angular.module('mobile', []);
app.controller('Screen', function($scope) {
$scope.changeScreen = function(myClass) {
$scope.theClass = myClass;
return $scope.theClass;
};
});