Mastering the art of applying and eliminating classes in AngularJS

Question

Mastering the art of applying and eliminating classes in AngularJS

Is it possible to adjust the size of the table by clicking a button on the side navigation bar? When the button is clicked, the table width should expand to maximum.

<table init-table="rowCollection" class="table table-striped table-responsive table-hover table-bordered" style="width:auto "overflow-x:auto">
  <thead>
    <tr class="width">
      <th>Id</th>
      <th class="col-md-4">Abstract</th>
      <th class="col-md-2">RTC Workspace</th>
      <th class="col-md-2">Requester</th>
      <th>Build Start</th>
      <th>Build Status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rowcollection">
      <td>{{row.build_id}}</td>
      <td>{{row.abstract}}</td>
      <td>{{row.rtc_workspace}}</td>
      <td></td>
      <td>{{row.build_start}}</td>
      <td>{{row.build_status}}</td>
      <td>
        <button type="button" class="btn btn-primary"  ng-click="approve(row)">Approve</button>
      </td>
    </tr>
  </tbody>
</table>

<!--panel-->
<div class="col-lg-12">
  <button type="button" class="btn btn-default btn-primary" ng-click="ShowHide()"> <span class="glyphicon glyphicon-eye-open"></span>&nbsp Sidebar toggle</a></button
</div>

Are there any methods to add a class that, when clicked on the button, can remove the class or perform similar actions?

css angularjs twitter-bootstrap-3

Answer 1

Answer №1

Here is a brief outline of how to achieve the desired functionality:

Create two CSS classes, named .full-width and .custom-width, then set a boolean variable within a function triggered by an event (such as ng-click). Apply these classes using ng-class based on the status of this variable.

ng-click = "clickMethod()";

In the corresponding controller:

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

In your HTML:

Utilize ng-class on the element, while also removing the width property from the table's inline style.

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

Answer 2

Here is a brief outline of how to achieve the desired functionality:

Create two CSS classes, named .full-width and .custom-width, then set a boolean variable within a function triggered by an event (such as ng-click). Apply these classes using ng-class based on the status of this variable.

ng-click = "clickMethod()";

In the corresponding controller:

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

In your HTML:

Utilize ng-class on the element, while also removing the width property from the table's inline style.

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

Answer 3

Answer №2

It seems like you are interested in using the ng-class directive.

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

Answer 4

It seems like you are interested in using the ng-class directive.

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

Mastering the art of applying and eliminating classes in AngularJS

Answer №1

Answer №2

Similar questions

Updating a validation directive on $watch in AngularJS version 1.2

Alert Div from Bootstrap fails to appear during the second ajax request if the first ajax request is canceled

Having trouble accessing the $scope property value in AngularJS

Trouble with data binding in AngularJS when using the input element

What could be the reason my div is not displaying correctly?

"Create a sleek slider with a modern Apple store aesthetic using Javascript

Code error: JSON unexpected token "&" encountered

Using Clip Path will result in the content always being hidden if it

Transferring data between various stages of the user interface

Halt hovering effect after a set duration using CSS or Vanilla JavaScript

How to align multiple span elements vertically using HTML and CSS

Center Align Element Vertically with pull-right Class in Bootstrap

The width of the column is not the same

Displaying a momentjs object within Angular templates

Troubleshooting a Next.js background image problem when hosting on Netlify

Encountering issues loading background image with Reactjs and Webpack

UI-Router fails to execute controller code in the presence of a view section

Can you identify the method used to apply CSS classes to an element?

Tips on how to align a wrapper-div in the center without affecting the positioning of the

The functionality of ItemSliding appears to be disabled when used in combination with