admin管理员组文章数量:1323330
I am new to angular, and I have a codepen that I am working in. I want to change the background color of another div to the corresponding color of the button when the user clicks the nav buttons at the bottom. I am not sure of the best way to implement this. Here is the code I have below.
Link to the codepen editor
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-ment"></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;
};
});
I am new to angular, and I have a codepen that I am working in. I want to change the background color of another div to the corresponding color of the button when the user clicks the nav buttons at the bottom. I am not sure of the best way to implement this. Here is the code I have below.
Link to the codepen editor 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-ment"></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;
};
});
Share asked Aug 27, 2015 at 18:13 LadyTLadyT 6592 gold badges12 silver badges32 bronze badges3 Answers
Reset to default 5You actually don't need to write a function to get this working (unless you want to do more than you specified). You can use ngClick to set a variable and also use that variable as your background color, all within the HTML.
http://codepen.io/anon/pen/JYPJBR
<div class="wrapper" ng-app="mobile">
<div class="phone">
<div class="page" ng-controller="Screen">
<div class="top_background" ng-style="{'background-color': screenColor}">
<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="screenColor='#C0392B'">
<h4><i class="fa fa-home"></i></h4>
</div>
<div class="col-sm-3 shop" ng-click="screenColor='#E74C3C'" ng-style="{'background-color': '#E74C3C'}">
<h4><i class="fa fa-shopping-cart"></i></h4>
</div>
<div class="col-sm-3 feeds" ng-click="screenColor='#E67E22'" ng-style="{'background-color': '#E67E22'}">
<h4><i class="fa fa-ment"></i></h4>
</div>
<div class="col-sm-3 settings" ng-click="screenColor='#F39C12'" ng-style="{'background-color': '#F39C12'}">
<h4><i class="fa fa-cog"></i></h4>
</div>
</div>
</div>
</div>
</div>
But, if you just want to know why your code isn't working, it's because you're trying to use changeScreen()
as both a getter and a setter, but it's not set up to do that.
You could either reference the variable theClass
like so:
<div class="top_background" ng-style="{'background-color': theClass}">
Or else modify the function to not set theClass
to undefined when you run it without arguments:
$scope.changeScreen = function(myClass) {
if(angular.isDefined(myClass)){
$scope.theClass = myClass;
}
console.log('the class', $scope.theClass);
return $scope.theClass;
};
Here is a codepen with what you wanted:
http://codepen.io/anon/pen/rOBwZV
HTML only is changed:
<div class="wrapper" ng-app="mobile" ng-init="bgCol='#F39C12'">
<div class="phone">
<div class="page" ng-controller="Screen">
<div class="top_background" style="background-color: {{bgCol}}">
<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="bgCol='#C0392B'">
<h4><i class="fa fa-home"></i></h4>
</div>
<div class="col-sm-3 shop" ng-click="bgCol='#E74C3C'" ng-style="{'background-color': '#E74C3C'}">
<h4><i class="fa fa-shopping-cart"></i></h4>
</div>
<div class="col-sm-3 feeds" ng-click="bgCol='#E67E22'" ng-style="{'background-color': '#E67E22'}">
<h4><i class="fa fa-ment"></i></h4>
</div>
<div class="col-sm-3 settings" ng-click="bgCol='#F39C12'" ng-style="{'background-color': '#F39C12'}">
<h4><i class="fa fa-cog"></i></h4>
</div>
</div>
</div>
</div>
</div>
The issue in your code is very tiny. Check this example to see how it works.
The first issue is that you call the method in html via:
<div class="top_background" ng-style="{'background-color': changeScreen()}">
Pay attention - no parameter passed to method. But in angularjs method is expecting a class name. Second, it would be better to have the entire style in an object as per example I provided, because in case there will be some other style properties, they can be added there and not call another function inside ng-style.
Hope this helps.
本文标签: javascriptChange background color ngclickStack Overflow
版权声明:本文标题:javascript - Change background color ng-click - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742139067a2422499.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论