Skip to content Skip to sidebar Skip to footer

Angular Js Ng Repeat With Conditional Ng Class Not Applying Css Class

I have a ng repeat with a ng class that doesn't apply the css class in the case where my css class has a hyphen in the name:
  • Solution 1:

    For me, your code works as is.

    Here is a plunker that demonstrates the code.

    js:

    var app = angular.module('myApp', []);
    
    app.controller('Ctrl', function($scope) {
    
      $scope.items = [
    
        { Id: 1, name: "item1" },
        { Id: 10, name: "item1" },
        { Id: 11, name: "item1" }
        ];
    
      });
    

    html:

    <html ng-app="myApp">
    
      <head>
        <script data-require="angular.js@*" data-semver="1.2.4" src="http://code.angularjs.org/1.2.4/angular.js"></script>
        <link  href="style.css" />
        <script src="script.js"></script>
      </head>
    
      <body ng-controller="Ctrl">
        <h1>Hello Plunker!</h1>
        <ul>
          <li
            ng-repeat="item in items"
            ng-class="{'i-someclass' : item.Id > 10}">
            {{item .name}}
          </li>
        </ul>
      </body>
    
    </html>
    

    css:

    .i-someclass {
      color: red;
    }
    

  • Post a Comment for "Angular Js Ng Repeat With Conditional Ng Class Not Applying Css Class"