ng-click機能を使用してボタンの色を変更する方法は？

Question

リソースからボタンリストを取得しました。t1、t2、t3、t4、t5、t6、t7、t8、t9、t10のような10個のボタンで構成されています。 2回目は同じボタンの色を緑色に変更します。

これは私の方法

$scope.ng-click=gettable(table){ 
    // 
    } 

Answer 1

これは簡単です。

<button type="button" class="btn {{table.btnClass}}" ng-click="getTable(table)"> 
{{table.tablename}}</button> 

とNG-クリック機能として：ちょうどthis-

for(var i = 0; i < $scope.tables.length; i++) 
{ 
    $scope.tables[i].btnClass = "btn-success"; 
} 

のようなテーブルの列であなたのすべてのアイテムを持つもう一つのプロパティをバインドその後、HTMLで、次のようにこのクラスを割り当てます：

$scope.getTable = function(table) { 
    table.btnClass = table.btnClass == "btn-info" ? "btn-success" : "btn-info" 
} 

または、マニュアルカラーを変更する場合は、次のようにCSSで1つのクラスを作成します。

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

その後（私はあなたが使用することをお勧め）controllerAsの構文を使用して機能

$scope.getTable = function(table) { 
    table.btnClass = table.btnClass == "red-button" ? "btn-success" : "red-button" 
} 

Answer 2

はここに私の提案ですされてどのようにこの

<div class="col-sm-2 col-lg-1 col-md-1" ng-repeat="table in tables" style="margin-left:1px"> 
<button type="button" class="btn btn-success" ng-click="getTable(table)">{{table.tablename}}</button> 
</div> 

を行うことを教えてください：自分の$scope.ng-click=gettable(table){ ...... }

• 内部色
• の配列を作成します。ボタンがクリックされるたびに、ランダムな色を引くその配列の中の値

Answer 3

では、次で動作することができます。

HTML：

<div ng-repeat="table in ctrl.tables"> 
    <button type="button" ng-click="ctrl.getTable(table)" ng-style="{ 'background-color': table.color }">{{table.tablename}}</button> 
</div> 

JS：

this.getTable = function(table) { 
    table.color = "red"; 
}; 

https://plnkr.co/edit/axzyUQJowlSEClszrIQs

Answer 4

var colors=['red','green','yellow','black','blue']; 
$scope.color=null; 
$scope.ng-click=gettable(table){ 
var colorToApply=colors[Math.floor(Math.random()*colors.length)]; 
$scope.color=colorToApply 
} 

今、あなたはここに

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

CSSルールを定義することができます

次に、あなたのビューであなたがボタンBTN-情報にあなたが色を変更し、

<button ng-style="color">Change color</button>