Arunkumar Vasudevan
Arunkumar Vasudevan

Reputation: 5330

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

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);
         }
         })

Upvotes: 0

Views: 1740

Answers (1)

devqon
devqon

Reputation: 13997

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;
}

Upvotes: 3

Related Questions