ng-style switching

The code below displays rectangle shape and if the 'attribute.dflt' is equal to 1 then the rectangle shape is set to medium style.

<div class="section" style="padding-bottom:20px" ng-repeat="attrs in groupedAttributes track by $index">
	<h6 class="title-attr"><small>{{::attrs[0].attribute | uppercase}}</small></h6> 
        <ul style="list-style:none;padding:0;" ng-repeat="attribute in attrs track by $index">
	        <li style="cursor: pointer;display: inline-block;">
		          <div ng-click="updatePrice(attribute,$index)" ng-style="{ 'border-width':(attribute.dflt===1)?'medium':'thin' }" class="boxed">{{attribute.value}}</div>
	        </li>
        </ul>
</div>

Open in new window


Now if I have more than one rectangle as attached (rectangle.png) then I would like the style to shift from one rectangle to another. For instance, the following:

1) Rectangle [Red]
2) Rectangle [Orange]

Now rectangle red style is medium and rectangle orange style is thin. If I click on rectangle orange then rectangle orange style should switch to medium and rectangle red style switch  to thin. How can I achieve it with my present coding. Your help is kindly appreciated.

Thank You.
rectangle.png
eugene007Asked:
Who is Participating?
 
Julian HansenCommented:
You can do this with an ng-click and ng-class

<div class="rectangle orange" ng-click="rectangle='orange'" ng-class="{thick: rectangle=='orange'}">
	Orange
</div>
<div class="rectangle red" ng-click="rectangle='red'" ng-class="{thick: rectangle=='red'}">
	Red
</div>

Open in new window

Then all you need is the styling
<style>
.rectangle {
	border: 1px solid black;
	padding: 20px;
}
.orange {
	border-color: orange;
}
.red {
	border-color: red;
}
.thick {
	border-width: 4px;
}
</style>

Open in new window

Working sample here

What we are doing is changing the value of 'rectangle' on the ng-click. When you click on the rectangle that is red - it sets the value of 'rectangle' to red, likewise for orange.

We then use an ng-class directive to set the .thick class on the <div> that matches the current value of 'rectangle'
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.