ngクリック機能が発生したときの文字色と背景色の変更方法

Question

ボタンが2つあります。今日と明日。そして、私は両方のボタンのクリック機能を持っています。私が必要とするのは、デフォルトでは、私のバックグラウンドカラーは白です。テキストの色は赤色になります。

私のトーデーボタンをクリックすると、バックグラウンドの色が青色に変わり、テキストの色が白に変わる必要があります。

明日ボタンを押すと、この同じデザインをこのボタンに適用する必要があります。今日のボタンはデフォルトの色にする必要があります。ここに私のコード

：

<div class="row" style="height: 52px;"> 
    <div class="col col-50" style="border-right: 1px #ccc solid; padding-top: 17px; text-align: center;" ng-click="GetDetails()" id="1"> 
     <span class="assertive" style="margin: 0px;color: #B90143;">TODAY</span> 
    </div> 

    <div class="col col-50" style="padding-top: 17px;text-align: center;" ng-click="GetTomorrowDetails()"> 

      <span class="assertive" style="margin: 0px;color: #B90143; width: 100%;">TOMORROW</span> 
     </div> 
    </div> 

両方のボタンのng-cilckのための私のコントローラ：

$scope.GetDetails = function(){ 

    $ionicLoading.hide(); 
    $scope.orders.length = 0 

    MydeliveryFactory.save($scope.orderInfo, function(response){ 
    var AllOrderValues = response.allorders; 
     for (var i = AllOrderValues.length - 1; i >= 0; i--) { 
      if(AllOrderValues[i].dateAdded == todaydate && AllOrderValues[i].monthAdded == todayMonth) { 
       $scope.orders.push(AllOrderValues[i]); 
       $ionicLoading.hide(); 
       console.log($scope.orders); 

      } 
      } 
     $window.localStorage.setItem("MyDeliverYOrders", JSON.stringify($scope.orders)); 

    }); 
    } 

$scope.GetTomorrowDetails = function(){ 
    $ionicLoading.show(); 
     $scope.orders.length = 0 
    MydeliveryFactory.save($scope.orderInfo, function(response){ 
    var Allvalues = response.allorders; 
     for (var i = Allvalues.length - 1; i >= 0; i--) { 
      if(Allvalues[i].dateAdded == tomorrowdate && Allvalues[i].monthAdded == tomorrowMonth) { 
       $scope.orders.push(Allvalues[i]); 
       $ionicLoading.hide(); 
       console.log($scope.orders); 
      } 
      } 
     $window.localStorage.setItem("MyDeliverYOrders", JSON.stringify($scope.orders)); 

    }); 
    } 

Answer 1

あなたがng-classと$scopes持つクラスを切り替えることができます。

私はボタンでng-class="{'active':active.today}"を追加して、それが明日のボタンに同じ、active.todayはtrueで、active.todayがfalseときに削除されますときactiveクラスが追加されることを意味し、

とjs機能にはちょうど$scopetrue間とをトグルしていますfalse。あなたのソリューションのための

angular.module('myApp', []).controller('myCtrl', function($scope) { 
 
    $scope.active = {}; 
 
    $scope.GetDetails = function() { 
 
    $scope.active.tomorrow = false; 
 
    $scope.active.today = true; 
 
    } 
 

 
    $scope.GetTomorrowDetails = function() { 
 
    $scope.active.today = false; 
 
    $scope.active.tomorrow = true; 
 
    } 
 
});

.active { 
 
    background: blue; 
 
    color: #fff!important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl" class="row" style="height: 52px;"> 
 
    <div class="col col-50" style="border-right: 1px #ccc solid; padding-top: 17px; text-align: center;" ng-click="GetDetails()" id="1"> 
 
    <span class="assertive" ng-class="{'active':active.today}" style="margin: 0px;color: #B90143;">TODAY</span> 
 
    </div> 
 

 
    <div class="col col-50" style="padding-top: 17px;text-align: center;" ng-click="GetTomorrowDetails()"> 
 

 
    <span class="assertive" ng-class="{'active':active.tomorrow}" style="margin: 0px;color: #B90143; width: 100%;">TOMORROW</span> 
 
    </div> 
 
</div>

Answer 2

があなたのボタンに共通するクラスを追加し、それらをデフォルトのCSSを提供し、これを行う方法。

<div class="row" style="height: 52px;"> 
    <div class="btn col col-50" style="border-right: 1px #ccc solid; padding-top: 17px; text-align: center;" ng-click="GetDetails($event)" id="1"> 
     <span class="assertive" style="margin: 0px;color: #B90143;">TODAY</span> 
    </div> 
    <div class="btn col col-50" style="padding-top: 17px;text-align: center;" ng-click="GetTomorrowDetails($event)"> 
     <span class="assertive" style="margin: 0px;color: #B90143; width: 100%;">TOMORROW</span> 
    </div> 
</div> 

.btn { 
    background-color: white; 
    color: red; 
} 

そして、あなたのコントローラでは、あなたのクリックハンドラを扱う：

$scope.GetDetails = function(event) { 
    $scope.defaultColors(); 
    event.target.style.backgroundColor = "blue"; 
    event.target.style.color = "white"; 
}; 

$scope.GetTomorrowDetails = function(event) { 
    $scope.defaultColors(); 
    event.target.style.backgroundColor = "blue"; 
    event.target.style.color = "white"; 
}; 

$scope.defaultColors = function() { 
    [].slice.call(document.getElementsByClassName("btn")).forEach(function(el, i) { 
     el.style.backgroundColor = "white"; 
     el.style.color = "red"; 
    }); 
}; 

Answer 3

は、あなたが動的にボタンに割り当てられたクラスを変更することができますこれを使用して、ngClassを見てください。

あなたのボタンのHTMLは、ほとんど次のようになります。

<button ng-class="[btn, btn-primary, {today: active-class}]" ng-click="GetDetails()">Today</button> 
<button ng-class="[btn, btn-primary, {!today: active-class}]" ng-click="GetTomorrowDetails()">Tomorrow</button> 

あなたのコントローラ、何かを次のように：

$scope.today = true; 

$scope.GetDetails = function() { 
    $scope.today = true; 
} 

$scope.GetTomorrowDetails = function() { 
    $scope.today = false; 
}