如何在angularjs中添加和删除类

时间:2017-04-27 08:31:37

标签: css angularjs twitter-bootstrap-3

点击按钮更改表格大小。 按钮单击属于侧导航栏。 点击按钮,需要将表格宽度更改为最大值。

int i;
for (i = 0; i + max < ids.size(); i += max) {
  chunks.add(ids.subList(i, i + max));
}
if (i < ids.size()) {
  chunks.add(ids.subList(i, ids.size());
}

任何添加类并单击按钮的方法都可以删除该类 善事?

2 个答案:

答案 0 :(得分:3)

下面只是伪算法如何实现预期的行为

创建两个类,比如名称.full-width .custom-width并在 ng-cilck 函数上设置一个布尔变量,然后应用 ng-class 基于该变量状态。

ng-click = "clickMethod()";

各个控制器中的

$scope.fullwidth = false;
$scope.clickMethod = function () {
     $scope.fulltable = true;
}
HTML中的

上应用 ng-class ,同时从表格中的内联样式中移除width属性。

ng-class="fulltable? 'full-width' : 'custom-width'"

答案 1 :(得分:2)

我认为您正在寻找 ng-class 指令。

.strike {
    text-decoration: line-through;
}
.bold {
    font-weight: bold;
}
.red {
    color: red;
}
.has-error {
    color: red;
    background-color: yellow;
}
.orange {
    color: orange;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-class-production</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  

  
</head>
<body ng-app="">
  <p ng-class="{strike: deleted, bold: important, 'has-error': error}">ng-class Syntax Example</p>
<label>
   <input type="checkbox" ng-model="deleted">
   deleted (apply "strike" class)
</label><br>
<label>
   <input type="checkbox" ng-model="important">
   important (apply "bold" class)
</label><br>
<label>
   <input type="checkbox" ng-model="error">
   error (apply "has-error" class)
</label>
</body>
</html>