Add a class selectively to an ng-repeat AngularJS

ng-class angularjs
angularjs ng-repeat index example
ng-repeat angular 6
ng-repeat array
ng-repeat filter
ng-class w3schools
ng-repeat array of objects
ng-repeat range

I have an ng-repeat for a table, I want to be able to add a class when <td> is clicked, and remove the class when un-clicked. Multiple <td> can be selected at the same time. Right now ALL of the cities are or are not getting the class applies.

For example: (lets say nodes has 100 items)

<tr ng-repeat node in nodes>
  <td>{{node.name}}</td>
  <td>{{node.date}}</td>
  <td ng-click="toggleMe( node.city )" ng-class"{clicked : isClicked()}" >{{node.city}}</td>
</tr>

in my JS

$scope.cityArr = [];

$scope.toggleMe = function(city) {
  if ($scope.count > 0) {
    angular.forEach($scope.cityArr, function(value) {
      if (city === value) {
        $scope.clicked = false;
      } else {
        $scope.cityArr.push(city);
        $scope.clicked = true;
      }
    });
  } else {
    $scope.cityArr.push(city);
    $scope.clicked = true;
  }
  $scope.count = 1;
};

$scope.isClicked = function() {
  return $scope.clicked;
};

Right now there is a single clicked property on the scope that you're changing and everything refers to that. Try to put clicked on the node instead...

$scope.toggleMe = function(node) {
  if ($scope.count > 0) {
    angular.forEach($scope.cityArr, function(value) {
      if (node.city === value) {
        node.clicked = false;
      } else {
        $scope.cityArr.push(node.city);
        node.clicked = true;
      }
    });
  } else {
    $scope.cityArr.push(node.city);
    node.clicked = true;
  }
  $scope.count = 1;
};

And in the ngRepeat...

<tr ng-repeat node in nodes>
  <td>{{node.name}}</td>
  <td>{{node.date}}</td>
  <td ng-click="toggleMe( node )" ng-class"{clicked : node.clicked}" >{{node.city}}</td>
</tr>

ngRepeat, Each template instance gets its own scope, where the given loop variable is set to </header> <div class="body"> Body {{ item }} </div> <footer ng-repeat-end>  Angularjs Select initial value for selectbox inside ng-repeat Tag: angularjs , angularjs-scope , angularjs-ng-repeat , angular-ngmodel I want to populate the selected color as selected option in selectbox in initially

You don't need a special function or controller to accomplish this:

<table>
    <tbody>
        <tr ng-repeat="node in nodes">
            <td>{{node.name}}</td>
            <td>{{node.date}}</td>
            <td ng-click="node.highlight = !node.highlight" 
                ng-class="{ highlight: node.highlight }">
                {{node.city}}
            </td>
        </tr>
    </tbody>
</table>

Full Plunker example: http://plnkr.co/edit/1hdcIOfz0nHb91uFWKrv

I could show you the controller I used by it's empty except for the test data. You don't need a function.

Pro AngularJS, Listing 7-10. Adding Buttons to the productList.html File <div class=" class="btn btn-block btn-default btn-lg">Home</a> <a ng-repeat="item in data.products  Let’s take a dive into Angular’s NgClass and master the syntax, whilst also learning about the native DOM API for class manipulation - an important feat before diving into the framework’s implementation. With Angular, we have a few approaches to add, remove or even toggle a class.

Alternately, the code can use a separate array and $index to set classes:

<tr ng-repeat="node in nodes"
    ng-class="{ highlight: highlightRows[$index] }">
  <td class="x" ng-click="toggleHighlight($index)">
    X
  </td>

This approach is useful if you want to separate Model data from View data.

The DEMO

angular.module("app", [])
.controller("TestController", function($scope) {
  $scope.highlightRows = [];
  $scope.toggleHighlight = function(idx) {
      $scope.highlightRows[idx] = !$scope.highlightRows[idx];
  };
  $scope.nodes = [
    { name: "Alpha", date: new Date(), city: "Omaha" },
    { name: "Bravo", date: new Date(), city: "New York" },
    { name: "Charlie", date: new Date(), city: "Minneapolis" }
  ];
})
table {
  border-collapse: collapse;
  font-family: sans-serif;
}
td {
  padding: 5px;
  border: solid black 1px;
}
.x {
  cursor: pointer;
}
.highlight {
  background: yellow;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="TestController">
    <table>
     <h3>Click on X to highlight</h3>
      <tbody>
        <tr ng-repeat="node in nodes"
            ng-class="{ highlight: highlightRows[$index] }">
          <td class="x" ng-click="toggleHighlight($index)">
            X
          </td>
          <td>{{node.name}}</td>
          <td>{{node.date | date}}</td>
          <td>{{node.city}}</td>
        </tr>
      </tbody>
    </table>
    highlightRows={{highlightRows}}
</body>

AngularJS: Developer Guide: Animations, <div ng-repeat="item in items" class="repeated-item"> {{ item.id }} </div> a new item is added into the list, ngRepeat will add an ng-enter class to the element that is being added. How to (selectively) enable, disable and skip animations. The ng-class directive dynamically binds one or more CSS classes to an HTML element. The value of the ng-class directive can be a string, an object, or an array. If it is a string, it should contain one or more, space-separated class names. As an object, it should contain key-value pairs,

ngClass, The directive won't add duplicate classes if a particular class was already set. <​p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax  Overview. The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.. The directive operates in three different ways, depending on which of three types the expression evaluates to:

ngClassEven, <ANY ng-class-even="expression"> . items.length)">Add item</button> <hr /> <​table> <tr ng-repeat="item in items" ng-class-even="'even'"> <td>{{ item }}</td>  To repeat a series of elements instead of just one parent element, ngRepeat (as well as other ng directives) supports extending the range of the repeater by defining explicit start and end points by using ng-repeat-start and ng-repeat-end respectively.

Issue with ng-repeat 5000 records ~750KB size + IE11 · Issue , <li ng-repeat="load in loadAndAxleDetailsFormData. <div class="​editableDropdown input-group"> <input type="text" class="col-md-3 ng-pristine ng-untouched ng-invalid https://code.angularjs.org/snapshot/docs/guide/​animations#how-to- data-placement="top" title="Add Comment" ng-if="allorder. AngularJS lets you create dropdown lists based on items in an array, or an object. If you want to create a dropdown list, based on an object or an array in AngularJS, you should use the ng-options directive: You can also use the ng-repeat directive to make the same dropdown list: Because the ng-repeat directive repeats a block of HTML code for

Comments
  • Thanks @georgeawg!