Datz Me
Reputation: 955
How to replace css class value using angularjs values?
I have a problem now to make my css values dynamic. I have this kind of code but not working
<style>
.panel-primary {
background-color:{{myColorPanel}}
}
</style>
I've seen this post from this link
How to Dynamically create a CSS class using AngularJS
i don't know what is my mistakes there that it didn't work.
Anyone have an alternative solution to my problem.
I just want to make bootstrap panel to be customized in colors and i don't want to put ng-class or ng-style in every panel i used coz it is so many.
Anyone have an idea please let me know.
Full Code
<!DOCTYPE html>
<html data-ng-app="Aptus">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
<title>Centralized Test</title>
<!--<link href="http://cdn.dbtc.sdb.ph/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />-->
<link href="contents/css/angucomplete.css" rel="stylesheet" />
<link href="contents/css/bootstrap.min.css" rel="stylesheet" />
<link href="contents/css/dashboard.css" rel="stylesheet" />
<link href="contents/css/loading-bar.css" rel="stylesheet" />
<link href="contents/css/loading-bar.min.css" rel="stylesheet" />
<link href="contents/css/font-awesome.min.css" rel="stylesheet" />
<link href="contents/css/cropper.min.css" rel="stylesheet" />
<link href="styles/myStyles.css" rel="stylesheet" />
<link href="contents/css/elusive-webfont.css" rel="stylesheet" />
<link href="contents/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="contents/css/angular-chart.css" rel="stylesheet" />
<link href="Scripts/ckeditor/contents.css" rel="stylesheet" />
<link href="Contents/css/colorpicker.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.ng-ckeditor {
border: 0;
}
body {
overflow-x: hidden;
}
#sidebar-dropdown {
color: #9a96a1 !important;
}
.form-control {
border-radius: 0 !important;
}
.modal .modal-body {
max-height: 450px !important;
overflow-y: auto;
}
@media (max-width:767px) {
.small-width-hidden {
display: none;
}
}
@media screen {
footer {
display: none;
}
}
@media print {
.progress {
background-color: #F5F5F5 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F5F5F5', endColorstr='#F5F5F5')" !important;
}
.progress-bar-success {
display: block !important;
background-color: #198718 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#198718', endColorstr='#198718')" !important;
}
.progress-bar-info {
display: block !important;
background-color: #5BC0DE !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5BC0DE', endColorstr='#5BC0DE')" !important;
}
.progress, .progress > .progress-bar {
display: block !important;
-webkit-print-color-adjust: exact !important;
box-shadow: inset 0 0 !important;
-webkit-box-shadow: inset 0 0 !important;
}
.not-printable {
display: none;
}
.additional {
display: inline-block !important;
}
.printable {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
}
.small-font {
font-size: 8pt !important;
}
.small-padding > tbody > tr > td {
padding-top: 1px !important;
padding-bottom: 1px !important;
margin: 1px !important;
}
.small-padding > tbody > tr > th {
padding-top: 1px !important;
padding-bottom: 1px !important;
margin: 1px !important;
}
.small-padding > table {
padding: 1px !important;
}
.small-font > span {
font-size: 6pt !important;
}
footer {
position: fixed !important;
bottom: 0 !important;
}
@page {
size: auto;
margin: 5mm;
}
}
#CriteriaTable > tr > th {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.dashboardsubmenu {
list-style-type: none;
padding-left: 10px;
}
.tab-content {
border-right: solid 1px #ddd;
border-left: solid 1px #ddd;
border-bottom: solid 1px #ddd;
}
#icon-tab > li > a {
border-radius: 0 !important;
}
#loading-bar-spinner .spinner-icon {
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: red;
border-left-color: red;
border-radius: 10px;
-webkit-animation: loading-bar-spinner 400ms linear infinite;
-moz-animation: loading-bar-spinner 400ms linear infinite;
-ms-animation: loading-bar-spinner 400ms linear infinite;
-o-animation: loading-bar-spinner 400ms linear infinite;
animation: loading-bar-spinner 400ms linear infinite;
}
#loading-bar .bar {
background: red;
}
#loading-bar .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 1px red, 0 0 1px red;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/************For Angular-Modal****************/
@media (max-width:530px) {
.message {
width: 100% !important;
}
}
/*******************************************/
a:not(:hover) {
text-decoration: none !important;
}
.modal-content {
border-radius: 0;
}
.go-top {
position: fixed;
bottom: 1em;
left: 1em;
text-decoration: none;
color: white;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
padding: 1em;
display: none;
}
.go-top:hover {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
.math-tex {
font-size: 20px !important;
}
table.floatThead-table {
border-top: none;
border-bottom: none;
background-color: #fff;
}
</style>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
}
});
</script>
<script type="text/javascript" src="Scripts/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><!---->
<!-- <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>-->
</head>
<body data-ng-cloak="" data-ng-controller="indexController">
<style>
.panel-primary {
background-color:{{myColorPanel}}
}
</style>
<div class="container">
<div class="row">
<div class="wrapper">
<div class="sidebar-wrapper not-printable">
<div class="sidebar not-printable" style="margin-bottom:10px">
<a href="#" class="logo">Centralized Test</a>
<div class="user-panel">
<div class="pull-left image">
<img src="Contents/images/photo.png" class="circular" alt="User Image" />
</div>
<div class="pull-left info">
<p>Hello {{lastName}}</p>
<a class="cursor-pointer" data-ng-click="logOut()">Log Out</a>
</div>
</div>
<ul class="nav nav-pills nav-stacked">
<li><a class="cursor-pointer">Dashboard</a></li>
<li id="sidebar-dropdown" data-ng-repeat="mod in modulesData | filter:{userRoleName:currentRole || ''}" data-ng-class="{'active' : activeModule == mod.moduleId}">
<a href="{{mod.moduleUrl}}" data-toggle="collapse" data-target="#{{mod.moduleId}}" data-ng-click="setCurrentModule(mod);SetActiveModule(mod.moduleId)">
<span class="pull-right"><span class="caret" data-ng-show="mod.moduleUrl == '#' || mod.moduleUrl == ''"></span></span><i class="{{mod.iconUrl}}"></i> <span>{{mod.moduleName}}</span>
</a>
<ul class="collapse dashboardsubmenu" id="{{mod.moduleId}}" style="list-style-type: none">
<li class="list-group-item no-border" data-ng-repeat="sub in mod.subModule | filter:{userRoleName:currentRole || ''}"><a href="{{sub.moduleUrl}}" data-ng-click="setCurrentModule(sub)"><i class="{{sub.iconUrl}}"></i> <span>{{sub.moduleName}}</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="content-wrapper">
<div class="content">
<div class="container not-printable">
<div class="row">
<div class="header">
<nav class="navbar navbar-static-top navigation" role="navigation">
<a class="navbar-toggle navbar-left cursor-pointer" role="button" id="toggle-button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-left">
<ul class="nav navbar-nav">
<li><a class="cursor-pointer" href="#/home" data-ng-click="setCurrentModule('Dashboard')" style="color:white !important"><span class="fa fa-home fa-lg"></span></a></li>
<li class="dropdown" data-ng-show="iTestRoles.length>0">
<a class="cursor-pointer dropdown-toggle" data-toggle="dropdown-menu" data-target="#Roles">{{currentRole}} <span class="caret"></span></a>
<ul class="dropdown-menu" id="Roles">
<li data-ng-repeat="data in iTestRoles"><a class="cursor-pointer" data-ng-click="SetiTestRole(data.userRoleName,data.userRoleId)">{{data.userRoleName}}</a></li>
</ul>
</li>
<li class="dropdown" data-ng-show="iTestSubjectGrade.length>0">
<a class="cursor-pointer dropdown-toggle" data-toggle="dropdown-menu" data-target="#SubGrade">{{subject}} {{grade}}<span class="caret"></span></a>
<ul class="dropdown-menu" id="SubGrade">
<li data-ng-repeat="data in iTestSubjectGrade"><a class="cursor-pointer" data-ng-click="SetiTestSubGrade(data.subject,data.grade,data.subjectCode,data.gradeID)">{{data.subject}} {{data.grade}}</a></li>
</ul>
</li>
</ul>
</div>
<div class="navbar-right right-nav">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle cursor-pointer" data-toggle="dropdown-menu" data-target="ProfileMenu">
<i class="fa fa-user"></i> {{firstName
}} {{middleInitial}} {{lastName}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" id="ProfileMenu">
<!-- User image -->
<li class="user-header bg-light-green">
<img src="Contents/images/photo.png" class="circular" alt="User Image" />
<p>
{{firstName}} {{middleInitial}} {{lastName}}
<!--- {{userRole}}-->
<small></small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<!-- <div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>-->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a class="btn btn-default btn-flat cursor-pointer">Profile</a>
</div>
<div class="pull-right">
<a class="btn btn-default btn-flat cursor-pointer" data-ng-click="logOut()">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="row not-printable" id="content-title">
<h3>{{currentModule.moduleDescription}}</h3>
</div>
<div class="row" id="content">
<div data-ng-view="" class="printable">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="go-top text-center not-printable">
<span class="fa fa-chevron-circle-up not-printable" style="font-size:32px"></span><br />
<span class="not-printable">Go to Top</span>
</a>
</div>
<div id="icon" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="border-radius:0">
<div class="modal-header" style="border-radius:0;background-color:#3c8dbc">
<label class="modal-title" style="color:white">Icons</label>
</div>
<div class="modal-body">
<ul class="nav nav-tabs cursor-pointer" role="tablist" id="icon-tab">
<li class="active"><a class="cursor-pointer" role="tab" data-toggle="tab" data-target="#glyphicons">Glyphicons</a></li>
<li><a role="tab" data-toggle="tab" data-target="#font-awesome">Font-Awesome</a></li>
<li><a role="tab" data-toggle="tab" data-target="#elusive">Elusive-Icon</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="glyphicons">
<div class="row">
<div class="col-md-12">
<div class="col-xs-1 col-md-1 cursor-pointer" data-ng-repeat="glyph in ModuleIcons.GlyphIcons" style="padding:10px"><span class="{{glyph.Name}}"></span></div>
</div>
</div>
</div>
<div class="tab-pane" id="font-awesome">
<div class="row">
<div class="col-md-12">
<div class="col-xs-1 col-md-1 cursor-pointer" data-ng-repeat="awesome in ModuleIcons.FontAwesome" style="padding:10px"><span class="{{awesome.Name}}"></span></div>
</div>
</div>
</div>
<div class="tab-pane" id="elusive">
<div class="row">
<div class="col-md-12">
<div class="col-xs-1 col-md-1 cursor-pointer" data-ng-repeat="elusive in ModuleIcons.ElusiveIcon" style="padding:10px"><span class="{{elusive.Name}}"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="border-radius:0">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-ng-click="Submit(classes,enrollCodes)">Continue</button>
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="warning-dialog.html">
<div class="modal-header" style="border-radius:0">
<h4 style="font-weight:bolder" class="text-center">You're Idle. Do Something!</h4>
</div>
<div ng-idle-countdown="countdown" ng-init="countdown=10" class="modal-body" style="border-radius:0">
<progressbar max="10" value="10" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</progressbar>
</div>
</script>
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
<h3>You've Timed Out!</h3>
</div>
<div class="modal-body">
<p>
You were idle too long. Normally you'd be logged out, but in this demo just do anything and you'll be reset.
</p>
</div>
</script>
<script src="scripts/jquery-1.11.1.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-local-storage.min.js"></script>
<script src="scripts/loading-bar.min.js"></script>
<script src="scripts/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="scripts/angular-idle.min.js"></script>
<script src="scripts/angucomplete-alt.min.js"></script>
<script src="scripts/moment.min.js"></script>
<script src="scripts/bootstrap-datetimepicker.min.js"></script>
<script src="scripts/cropper.min.js"></script>
<script src="scripts/dashboard.js"></script>
<script src="scripts/ckeditor/ckeditor.js"></script>
<script src="scripts/Chart.min.js"></script>
<script src="scripts/angular-chart.js"></script>
<script src="Scripts/ng-ckeditor.js"></script>
<script src="Scripts/angularjs-unique.js"></script>
<script src="Scripts/bootstrap-colorpicker-module.min.js"></script>
<script src="app/app.js"></script>
<script src="app/Controllers/IndexController.js"></script>
<script src="app/Controllers/loginController.js"></script>
<script src="app/Services/authInterceptorService.js"></script>
<script src="app/Services/authService.js"></script>
<script src="app/Controllers/HomeController.js"></script>
<script src="app/Services/HomeService.js"></script>
<script src="app/Filters/Filter.js"></script>
<script src="app/Controllers/SetupController.js"></script>
<script src="app/Services/SetupService.js"></script>
<script src="app/Directives/Directives.js"></script>
<script src="app/Controllers/TestController.js"></script>
<script src="app/Services/TestService.js"></script>
<script src="app/Controllers/ITestController.js"></script>
<script src="app/Services/ITestService.js"></script>
<script src="app/Services/SignalRService.js"></script>
<script src="Scripts/jquery.floatThead.min.js"></script>
<script src="app/Controllers/ActivateExamController.js"></script>
<script src="app/Services/ExamActivationService.js"></script>
<script type="text/javascript">
$('#icon-tab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});
//$.fn.modal.Constructor.prototype.enforceFocus = function () {
// modal_this = this
// $(document).on('focusin.modal', function (e) {
// if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
// && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
// && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
// modal_this.$element.focus()
// }
// })
//};
$(document).ready(function () {
// Show or hide the sticky footer button
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function (event) {
event.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 300);
})
});
</script>
</body>
</html>
Upvotes: 0
Views: 1228
Answers (6)
Datz Me
Reputation: 955
Now I found the real problem. Its the version of the angularjs that i use didn't support angularjs in style. Since it is an existing system, the angularjs used is older version. The version I previously used is 1.2x then i updated it to newer version (1.5x) and all the code I used is now working. Thank a lot for all the effort of you guys. I know its my fault not realized about the version of angularjs but thank you so much.
The solution was changing from old version to newer version.
Upvotes: 1
sagar chopada
Reputation: 332
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
angular.module("myApp",[]).controller("myController",function($scope){
$scope.name="sagar";
$scope.myColorPanel ="green";
$scope.colorChange=function(color){
$scope.myColorPanel =color;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<style>
.panel-primary {
background-color:{{myColorPanel}};
}
</style>
<div class="panel-primary"><h3>{{name}} ,dynamic Color Change By Angularjs</h3></div>
<button ng-click="colorChange('red')">Red</button>
<button ng-click="colorChange('blue')">Blue</button>
<button ng-click="colorChange('pink')">Pink</button>
<button ng-click="colorChange('yellow')">Yellow</button>
</body>
</html>Hope That Was Help you..
Upvotes: 1
Partha Sarathi Ghosh
Reputation: 11576
Put the style tag inside your controller, not in the head tag as follows
<body ng-controller="MainCtrl">
Background of div is <input ng-model="name">
<style>
.p { background-color: {{name}}; }
</style>
<div class="p">dddd</div>
</body>
Upvotes: 0
8eecf0d2
Reputation: 1579
I've provided a simple example below as to how you can switch classes, not directly modify the classes, however that's not a very typical procedure.
function MyCtrl($scope) {
$scope.myClass = 'blue'
}.blue { color: blue }
.red { color: red }<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<h2 ng-class="myClass" ng-click="myClass = myClass == 'blue' ? 'red' : 'blue'">Click Me!</h2>
</div>Upvotes: 1
Mohayemin
Reputation: 3870
I think it should work.
May be there are other places where background color on .panel-primary is being set.
You are using bootstrap, right? Make sure your custom CSS is loaded after bootstrap's CSS.
Upvotes: 0
Nirmal Borkar
Reputation: 126
ng-class is the best option if you want it to work using AngularJs. You can check this article.Hopefully this will give you the solution to your problem.
Upvotes: 0
Related Questions
- How do I check if an array includes a value in JavaScript?
- How do I replace all occurrences of a string?
- How can I transition height: 0; to height: auto; using CSS?
- How do CSS triangles work?
- How can I change an element's class with JavaScript?
- How do I reduce the opacity of an element's background using CSS?
- How can I vertically center a div element for all browsers using CSS?
- Get selected value in dropdown list using JavaScript
- How can I get query string values in JavaScript?
- How does data binding work in AngularJS?