AngularJS onClick of button. I want to change color of another element

Question

I am new to angular. i developed app like

enter image description here

I successfully developed next and previous button functionality. Now I want to write submit button.my idea is when submit button pressed the response will be captured and validate finally after all questions answered.and also if i press submit button corresponding pagination tab color changes to green like if I attended 1 and 2 means the first two tab color changes to green. how can I implement this. Any ideas?

my quizcontroller.js

angular.module('app').controller('Quizcontroller',function($scope,updateservice){
   $scope.$watch(function($scope){
   $scope.count=updateservice.getupdate();
   });
   $scope.questions=[
                  {
                  id:1,
                  question:'When a gas is turned into a liquid, the process is called',
                  options: [
                                 {option:'condensation'},
                                 {option:'evaporation'},
                                 {option:'deposition'},
                                 {option:'sublimation'} 
                           ]
                  },
                  {
                  id:2,
                  question:'Which of the following parts of the sun is easily visible only during a total solar eclipse? ',
                  options: [
                                 {option:'core'},
                                 {option:'photosphere'},
                                 {option:'sunspots'},
                                 {option:'corona'}  
                           ]
                  },
                  {
                  id:3,
                  question:'The accumulation of stress along the boundaries of lithospheric plates results in which of the following? ',
                  options: [
                                 {option:'Earthquakes'},
                                 {option:'Magnetic reversals'},
                                 {option:'Hurricanses'},
                                 {option:'Increased deposition of deep-sea sediments'}  
                           ]
                  },
                  {
                  id:4,
                  question:'Pollination by birds is called ',
                  options: [
                                 {option:'autogamy'},
                                 {option:'ornithophily'},
                                 {option:'entomophily'},
                                 {option:'anemophily'}  
                           ]
                  }
             ];
       updateservice.settotal($scope.questions.length)
       $scope.next=function($scope){
       var val=updateservice.getupdate();
       updateservice.setupdate(val<updateservice.gettotal()-1?++val:0);
        },
       $scope.prev=function($scope){
       var val=updateservice.getupdate();
       updateservice.setupdate(val>0?--val:updateservice.gettotal()-1);
         }
         })

If all this is in same controller - just use ng-class.

Petr Averyanov
– Petr Averyanov

2015-03-11 13:43:09 +00:00
Commented Mar 11, 2015 at 13:43 — Petr Averyanov
– Petr Averyanov, Commented Mar 11, 2015 at 13:43
see the edit and give me light on this.

Arunkumar Vasudevan
– Arunkumar Vasudevan

2015-03-11 13:48:23 +00:00
Commented Mar 11, 2015 at 13:48 — Arunkumar Vasudevan
– Arunkumar Vasudevan, Commented Mar 11, 2015 at 13:48

devqon · Accepted Answer · 2015-03-16 09:15:58Z

3

Add a 'flag' to your scope, that says if it should change color:

$scope.flag = false;

$scope.clickedButton = function() {
    // some conditions
    if(itIsTrue) {
        $scope.flag = true;
    }
}

html:

<button ng-click="clickedButton()">Click me!</button>

<button ng-class="{ green: flag }">MyButton</button>

css:

.green {
    background-color: green;
}

edited Mar 16, 2015 at 9:15

answered Mar 11, 2015 at 14:11

devqon

14k2 gold badges32 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

AngularJS onClick of button. I want to change color of another element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related