Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>ng-class</title>
</head>
<body ng-app>
  <div ng-init="addClass='red';">
  <div ng-class="addClass">Anna</div>
  <div ng-controller="Ctrl">
        <div ng-class="cssObj[selectd]">Anna</div>
    </div>
    <div class="well span4" style="margin-top:20px;" ng-controller="Ctrl">
        <label><input type="checkbox" ng-model="useRed" style="margin:0;"> Red?</label>
        <label><input type="checkbox" ng-model="useBold" style="margin:0;"> Bold?</label>
        <label><input type="checkbox" ng-model="useItalic" style="margin:0;"> Italic?</label>
        <div ng-class="{ red: useRed, bold: useBold, italic: useItalic }">Anna</div>
    </div>
    
</div>
</body>
</html>
 
.red {
            color: blue;
}
.bold {
            font-weight: bold;
}
.italic {
            font-style: italic;
}
 
var Ctrl = function($scope){
    $scope.cssObj = { 
        useRed: 'red', 
        useBold: 'bold', 
        useItalic: 'italic'
    };
    
    $scope.selectd = 'useItalic';
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
annaismepro
0viewers