how to add and remove class in angularjs

Question

Changing the table size on button click . Button click belongs to side navigation bar . on click of button , need to change the table width 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>

Any way to add the class and click on button can remove the class kind og things ?

xkeshav · Accepted Answer · 2017-04-28 04:58:00Z

4

below is only pseudo algorithm how to achieve the expected behavior

make two classes, let say name .full-width .custom-width and set a boolean variable on ng-cilck function and then apply classes with ng-class based on that variable status.

ng-click = "clickMethod()";

in respective controller

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

in HTML

apply ng-class on , also remove width property from inline style on table.

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

edited Apr 28, 2017 at 4:58

answered Apr 27, 2017 at 8:38

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sri Sai Ramya T Over a year ago

ng-class need to be applied in every <td> element @di

xkeshav Over a year ago

No. you need to apply in on <table> and remove width attribute from style

scary_devil · Accepted Answer · 2017-04-27 08:40:16Z

I think you are looking for 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>

Collectives™ on Stack Overflow

how to add and remove class in angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related