ng-clickを使用して他のボタンでクリックするとボタンの色が変わります

新しい角度です。 button1をクリックすると2つのボタンがあり、その色は緑色から赤色に変わり、その後button2をクリックすると、button1の色は再び緑色に変わります。 ng-clickを使ってどうすればいいですか？ng-clickを使用して他のボタンでクリックするとボタンの色が変わります

その私のindex.html

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
\t <script type="text/javascript" src="app.js"></script> 
 

 
\t <title></title> 
 
</head> 
 
<body ng-controller ="testCtrl" > 
 
<button type="button" class="btn btn-default" ng-click="chngcolor()" >Chnage Color</button> 
 
<button type="button" class="btn btn-default" ng-click="chcolor()" >Pre Color</button> 
 
</body> 
 
</html>

、これは私のapp.jsコードは、私はアプリで書くべき

var myApp = angular.module("myApp",[]); 
 
\t myApp.controller('testCtrl', function($scope){ 
 
\t \t $scope.chngcolor = functionn{ 
 
\t \t 
 
\t \t }; 
 
\t });

です。 j ？ここ

出典

2016-07-07 Abhay Sharma

[重複]（http://stackoverflow.com/questions/20460369/adding-and- removed-classes-in-angularjs-using-ng-click） – Gintoki

は一例であり、角コントローラを用いてng-style

<div ng-controller="MainController"> 
    <button type="button" class="btn btn-default" ng-click="chngcolor()" ng-style="color">Change Color</button> 
    <button type="button" class="btn btn-default" ng-click="chcolor()">Pre Color</button> 
</div>

を設定するコントローラコード

// set default color 
    $scope.color = {'background-color': 'green'}; 

    $scope.chngcolor = function() { 
    $scope.color = {'background-color': 'red'}; 
    }; 

    $scope.chcolor = function() { 
    $scope.color = {'background-color': 'green'}; 
    // Shorter way to for the same result 
    // $scope.color.backgroundColor = 'green'; 
    };

ここ動的にng-classディレクティブを使用してcssクラスを追加しJSFiddle

出典

2016-07-07 09:53:46 shammelburg

ありがとうございました。 –

<button type="button" class="btn btn-default" ng-class="color" ng-click="color=red" ng-init="color=green">Chnage Color</button> 
<button type="button" class="btn btn-default" ng-click="color=green" >Pre Color</button> 

<style> 
    .green { 
     color: green; 
    } 
    .red { 
     color: red; 
    } 
</style>

出典

2016-07-07 09:47:12

ありますクリックイベント。

CSS：

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

.green-color { 
    background-color: green; 
}

HTML：

<button type="button" class="btn btn-default" ng-class="color" ng-click="color='red-color'">Change Color</button> 
    <button type="button" class="btn btn-default" ng-click="color='green-color'">Pre Color</button>

Live Demo @ JSFiddle

出典

2016-07-07 09:57:28 dreamweiver

ng-clickを使用して他のボタンでクリックするとボタンの色が変わります

答えて

関連する問題