AngularJS onClick按钮。我想改变另一个元素的颜色

时间:2015-03-11 13:40:44

标签: javascript jquery html angularjs

我是棱角分明的新人。我开发了像

这样的应用程序

enter image description here

我成功开发了下一个和上一个按钮功能。现在我想写提交按钮。我的想法是当提交按钮时按下响应将被捕获并在所有问题回答后最终验证。如果我按提交按钮相应的分页选项卡颜色更改为绿色,如果我参加1和2意味着前两个标签颜色变为绿色。我该如何实现呢。有什么想法吗?

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

1 个答案:

答案 0 :(得分:3)

在示波器中添加一个“标志”,表示它是否应该改变颜色:

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