Reputation: 5330
I am new to angular. i developed app like
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
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