JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<script src="https://code.angularjs.org/1.6.6/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div ng-app="myApp">
  <div ng-controller="MyCtrl" ng-init="this.bold = true; this.red = false; this.underline = true">
    <div class="row">
      <div class="col-12">
        Выберите стили:
      </div>
      <div class="col-4">
        <input type="checkbox" ng-model="red" />
        <label class="form-label red">Красный</label>

      </div>
      <div class="col-4">
        <input type="checkbox" ng-model="bold" />
        <label class="form-label bold">Жирный</label>
      </div>
      <div class="col-4">
        <input type="checkbox" ng-model="underline" />
        <label class="form-label underline">Подчеркнутый</label>
      </div>
      <br />
      <div class="col-12" ng-class="{red: red, bold: bold, underline: underline}"
      ng-attr-id="{{a ? 'id' : undefined}}"
      >
       Какой-то текст.
       {{
       {red: red, bold: bold, underline: underline}
       }}
      </div>
    </div>
  </div>
</div>

CSS

.red {
  color: red;
}
.bold {
  font-weight: 600;
}
.underline {
  text-decoration: underline;
}

JavaScript

var myApp = angular.module('myApp', []);
var MyCtrl = myApp.controller('MyCtrl', ($scope) => {
	console.log($scope)
});