我从资源中获取了按钮列表。它由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){
//
}
答案 0 :(得分:1)
以下是我的建议:在$scope.ng-click=gettable(table){ ...... }
答案 1 :(得分:1)
这很容易。只需将另外一个属性与表数组中的所有项绑定,就像这样 -
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"
}
答案 2 :(得分:0)
使用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";
};
答案 3 :(得分:0)
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>