Изменение цвета фона кнопки при нажатии

я хотел бы изменить цвет фона кнопки, когда она нажатаИзменение цвета фона кнопки при нажатии

HTML код:

<div class="btn-group"> 
    <button type="button" class="btn btn-default" ng-click="style1()"> 
     Celsius 
    </button> 
    <button type="button" class="btn btn-default" ng-click="style2()"> 
     Fahrenheit 
    </button> 
</div>

Угловая код, где цвета фона кнопок должны быть изменена:

$scope.style 
{ 
}; 
$scope.style2 
{ 
}

источник

2015-12-22 V Jayanth Reddy

Вы должны сделать это таким образом

angular.module('myapp',[]).controller('testCtrl', function($scope){});

<html ng-app="myapp"> 
 

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

 
<body ng-controller="testCtrl"> 
 
    <div class="btn-group" ng-init="style={'background-color' : 'green'}"> 
 
    <button type="button" class="btn btn-default" ng-style="style1" 
 
      ng-click="style1=style; style2=null">Celsius</button> 
 
    <button type="button" class="btn btn-default" ng-style="style2" 
 
      ng-click="style2=style; style1=null">Fahrenheit</button> 
 
    </div> 
 
    <br> 
 
</body> 
 

 
</html>

источник

2015-12-22 11:52:14 Vivek

Для двух кнопок он показывает два разных цвета, но мне нужен только один цвет, который переключаются между двумя кнопками –

@VJayanthReddy Я обновил ответ. Пожалуйста, смотрите. – Vivek

Я хотел бы использовать ng-class или ng-style, которые применить стиль CSS или класс, основанный на выражении области видимости. Подробную информацию см. В документации по угловым измерениям.

источник

2015-12-22 11:45:56 devman81

Это, вероятно, быть комментарий на самом деле, а не хороший ответ –

@joe_young Только мое мнение, но я бы не согласился. Его действительный ответ и использование угловых средств, регулярно использующих их документацию. ng-class или ng-style могут быть очень мощными и кажутся идеальными. – devman81

Вы можете подготовить CSS класс:

.clicked 
{ 
color:red; 
}

HTML:

<div class="btn-group"> 
     <button type="button" class="btn btn-default" ng-click="buttonClick('Celsius')" ng-class="{'clicked': selectedButton== 'Celsius' }"> 
      Celsius 
     </button> 
     <button type="button" class="btn btn-default" ng-click="buttonClick('Fahrenheit')" ng-class="{'clicked': selectedButton== 'Fahrenheit' }"> 
      Fahrenheit 
     </button> 
    </div>

и дать имя класса функции мыши:

$scope.buttonClick= function (s){$scope.selectedButton =s }

http://jsfiddle.net/ms403Ly8/38/

источник

2015-12-22 11:49:01

Я не могу понять, что вы говорите –

жаль, что я обновил свой ответ. http://jsfiddle.net/ms403Ly8/37/ –

, но нет никаких изменений в цвете фона –

Примите помощь от этого кода

<html ng-app="app"> 
<head> 
<title>example</title> 
<style type="text/css"> 

    .red{ 
    color:red; 
    } 
    .blue{ 
    color:blue; 
    } 

</style> 
</head> 
<body ng-controller="con"> 
<div ng-class="class">{{class}}</div> 
<button ng-click="changeClass()">Change Class</button> 

<script type="text/javascript" src="js/angular.min.js"></script> 
<script type="text/javascript"> 
    var app = angular.module("app",[]); 

    app.controller("con",function($scope){ 

    $scope.class = "red"; 

    $scope.changeClass = function(){ 
     if ($scope.class === "red") 
     $scope.class = "blue"; 
     else 
     $scope.class = "red"; 
    }; 
    }); 
</script>

источник

2015-12-22 12:07:24

Изменение цвета фона кнопки при нажатии

ответ

Смежные вопросы