Question

我从资源中获取了按钮列表。它由10个按钮组成 T1，T2，T3，T4，T5，T6，T7，T8，T9，T10

当我点击第一次按钮上的t1按钮时，颜色变为红色。第二次我点击相同的按钮颜色变为绿色。

请告诉我该怎么做

<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 1

以下是我的建议：在$scope.ng-click=gettable(table){ ...... }

内

创建颜色数组
每次按下按钮，在该数组中拉出一个随机颜色值

Answer 2

这很容易。只需将另外一个属性与表数组中的所有项绑定，就像这样 -

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

然后在HTML中，像这样分配这个类：

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

和ng-click功能为：

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

或者，如果您想更改手动颜色，请在css中创建一个类：

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

然后在函数中

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

Answer 3

使用controllerAs语法（我建议您使用），您可以使用以下内容。

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
 }

现在你可以在这里定义css规则

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

然后在您的视图中，您可以在要更改颜色的按钮上设置ng样式，并将其绑定到范围内的颜色，如

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

如何使用ng-click功能更改按钮颜色？

4 个答案: