Question

在我的应用程序中，我有一个产品ID列表，用户可以通过单击按钮将其分配给“Hot”或“Cold”。

此列表的显示方式如下：

这就是它的创建方式：

<table>
   <tr ng:repeat="acq in WaterList">
      <td style="border:0; padding:5px 20px">{{acq.ProductNumber}}</td>
      <td style="border:0; padding:5px 20px"><button class="btn btn-primary" type="button" ng-click="updAC(acq.ApartmentId, acq.ProductNumber, acq.WaterTempId)">HOT</button></td>
      <td style="border:0; padding:5px 20px"><button class="btn btn-primary" type="button" ng-click="updAF(acq.ApartmentId, acq.ProductNumber, acq.WaterTempId)">COLD</button></td>
   </tr>
</table>

我想在按钮的父<td>中添加一个样式来添加一个类，例如添加一个边框来显示点击的按钮。

如何使用Angular执行此操作？

另一个想法可能是添加bootstrap类disabled（不使用ng-disabled或禁用的HTML属性，因为按钮应保持可点击状态）到未单击的按钮。

Answer 1

你可以这样做。

HTML：

<table>
  <tr ng:repeat="acq in WaterList">
    <td style="padding:5px 20px">{{acq.ProductNumber}}</td>
    <td style="padding:5px 20px"><button data-ng-class="{active:index=={{$index}} && set===1}" class="btn btn-primary" type="button" ng-click="updAC($index, 1)">HOT</button></td>
    <td style="padding:5px 20px"><button data-ng-class="{active:index=={{$index}} && set===2}" class="btn btn-primary" type="button" ng-click="updAF($index, 2)">COLD</button></td>
  </tr>
</table>

控制器：

$scope.updAC = function(index, set) {
  $scope.index=index;
  $scope.set=set;
};

$scope.updAF = function(index, set) {
  $scope.index=index;
  $scope.set=set;
};

CSS：

button.active {
  border-bottom: 2px solid #000000;
}

我遗漏了所有其他变量等只是为了测试它，但你可能知道如何将它实现到你自己的html和函数中。你也可以做这个变化。例如，设置不同的边框或单击“HOT”或“COLD”时的内容。

根据评论编辑：

您可以像这样切换课程：

tr.hot button.hot {
  border: 2px solid red;
}

tr.cold button.cold {
  border: 2px solid blue;
}

<!doctype html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>

<body ng-controller='testCtrl'>
    <h1>Your Order</h1>
    <table>
      <tr ng:repeat="acq in WaterList">
        <td style="padding:5px 20px">{{acq.ProductNumber}}</td>
        <td style="padding:5px 20px"><button class="btn btn-primary hot" type="button" ng-click="updAC($event, 'hot')">HOT</button></td>
        <td style="padding:5px 20px"><button class="btn btn-primary cold" type="button" ng-click="updAF($event, 'cold')">COLD</button></td>
      </tr>
    </table>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script>
function testCtrl($scope) {
  $scope.WaterList = [
    {
      'ProductNumber': 1
    },{
      'ProductNumber': 2
    },{
      'ProductNumber': 3
    }
  ];
  
  $scope.updAC = function(element, set) {
    var tr = angular.element(element.target).parent().parent();
    tr.removeClass('hot');
    tr.removeClass('cold');
    if (tr.hasClass(set)) {
      tr.removeClass(set);
    } else {
      tr.addClass(set);
    }
  };

  $scope.updAF = function(element, set) {
    var tr = angular.element(element.target).parent().parent();
    tr.removeClass('hot');
    tr.removeClass('cold');
    if (tr.hasClass(set)) {
      tr.removeClass(set);
    } else {
      tr.addClass(set);
    }
  };
}
</script>
</body>
</html>

Answer 2

将对象传递给updAF和updAC函数，并使用object属性添加ng-class：

<table>
   <tr ng:repeat="acq in WaterList">
      <td style="border:0; padding:5px 20px">{{acq.ProductNumber}}</td>
      <td style="border:0; padding:5px 20px" ng-class="{hot: acq.hot}"><button class="btn btn-primary" type="button" ng-click="updAC(acq)">HOT</button></td>
      <td style="border:0; padding:5px 20px"ng-class="{cold: acq.cold}"><button class="btn btn-primary" type="button" ng-click="updAF(acq)">COLD</button></td>
   </tr>
</table>

并在updAF和updAC函数中向acq添加属性：

$scope.updAF = function(acq) {
   acq.cold = true;
   acq.hot = false;
};
$scope.updAC = function(acq) {
   acq.hot = true;
   acq.cold = false;
};

Answer 3

您可以使用hr标记而不是css中的按钮来执行此操作。

<a id="btn" href="#btn">Demo</a>

这里有fiddle

Answer 4

查看ngClass Directvie。

AngularJS - 单击按钮时将样式/类添加到父元素

4 个答案: