Question

我使用ngRepeat生成四个按钮。每当我点击其中一个按钮时，我想改变它的颜色并执行一个功能（现在，为了简单起见，我只是使用console.log）。如果我点击另一个按钮，我想改变它的颜色，同时将前一个按钮恢复为原始颜色。

我有几个问题 - 首先是我似乎无法接受两个命令（第一个是console.log函数，第二个是更改按钮颜色的指令））。另一个问题是，如果我取出console.log函数，当我点击一个按钮时，我最终会更改所有按钮。

有什么想法吗？这里是傻瓜：http://plnkr.co/edit/x1yLEGNOcBNfVw2BhbWA。您将看到console.log正常工作，但按钮更改不起作用。我是否因为这次点击而做错了什么？

<span class="btn cal-btn btn-default" ng-class="{'activeButton':selectedButt === 'me'}" ng-click="log(element);selectedButt = 'me'" data-ng-repeat="element in array">{{element}}</span>

Answer 1

您可以在控制器中创建一个处理此逻辑的简单函数：

$scope.selectButton = function(index) {
    $scope.activeBtn = index;
}

然后，您只需检查模板中当前按钮是否处于活动状态：

<span class="btn cal-btn btn-default" ng-class="{true:'activeButton'}[activeBtn == $index]" ng-click="selectButton($index);" ng-repeat="element in array">{{element}}</span>

我还更改了您的plunkr

Answer 2

您可以先将元素列表从字符串数组转换为对象数组。

$scope.array = [
  {"name":"first", "checked":false},
  {"name":"second", "checked":false},
  {"name":"third", "checked":false},
  {"name":"fourth", "checked":false}
];

您的日志功能需要更改为：

$scope.log = function(element) {
  console.log(element.name);

  angular.forEach($scope.array, function(elem) {
    elem.checked = false;
  });

  element.checked = !element.checked;
}

然后，在您的HTML中：

<button class="btn cal-btn"
  ng-repeat="element in array"
  ng-click="log(element)"
  ng-class="{activeButton: element.checked, 'btn-default': !element.checked}"
  >{{element.name}}</button>

请参阅更新的plunker here。

从ngRepeat生成的按钮列表中更改单个按钮颜色

2 个答案: