Angular JS, Image Menu

Question

I want to develop an app using images as my menu button, however, i want to blur the other images that was not clicked or change the color of the image that was on clicked. please help me out on this, I'm new in using angularjs
System Status

        <div class="col-sm-2 col-xs-6">
            <a class="thumbnail setting_subcatalog_icon" href="#">
                <img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
                <p class="subcatalog_name_h">System<br>Settings</p>                       
            </a>             
        </div>

         <div class="col-sm-2 col-xs-6">
            <a class="thumbnail setting_subcatalog_icon" href="#">
                <img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
                <p class="subcatalog_name_h">Time and Date<br></p>                       
            </a>             
        </div>

         <div class="col-sm-2 col-xs-6">
            <a class="thumbnail setting_subcatalog_icon" href="#">
                <img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
                <p class="subcatalog_name_h">Firmware<br>Update</p>                       
            </a>             
        </div>

        <div class="col-sm-2 col-xs-6">
            <a class="thumbnail setting_subcatalog_icon" href="#">
                <img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
                <p class="subcatalog_name_h">USB<br>Devices</p>                       
            </a>             
        </div>
      </div>

Imtiaz · Accepted Answer · 2015-12-02 02:28:23Z

1

I hope I understand your problem correctly. Please have a look at this Codepen

Explanation: In ng-class I am giving a condition if toggleObject.item value is equal to index value of the list, then set a class to image-active. In controller i have initialised toggleObject.item to -1 so if you not click the item condition will not fulfil and image-active class will not apply.

CSS:

.image-active{
filter: blur(0px) !important;
   -webkit-filter: blur(0px) !important;
}

.image-deactive{
  filter: blur(20px);
   -webkit-filter: blur(20px);

}

HTML:

 <img class="image-deactive" ng-class="{'image-active' : toggleObject.item == $index}" ng-src={{client.image}} alt="">

CONTROLLER:

$scope.toggleObject = {item: -1};

answered Dec 2, 2015 at 2:28

Imtiaz

913 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bleyk Over a year ago

thank you, i would like to ask where should i put the controller part?

bleyk Over a year ago

thank you, i would like to ask where part should I put the controller?

Imtiaz Over a year ago

You can either put controller inside HTML in <script> tag above </body> or create a separate .js file and reference that after angularjs load.

Collectives™ on Stack Overflow

Angular JS, Image Menu

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related