Angular/BootStrap Demo

by cn172

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div ng-controller="ButtonsCtrl">
    <pre>{{singleModel}}</pre>
    <button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
        Single Toggle
    </button>
    <h4>Checkbox</h4>
    <pre>{{checkModel}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</label>
        <label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</label>
        <label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</label>        
    </div>    
    <hr /> 
    <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
    <hr />
	<div collapse="isCollapsed">
		<div class="well well-lg">Some content</div> 
	</div>
</div>

JavaScript

// See: http://angular-ui.github.io/bootstrap/

var myApp = angular.module('myApp', ['my.controllers', 'ui.bootstrap']);

var controllers = angular.module('my.controllers', []);

controllers.controller('ButtonsCtrl', function($scope) {
  $scope.singleModel = 1;

  $scope.radioModel = 'Middle';

  $scope.checkModel = {
    left: false,
    middle: true,
    right: false
  };
    
  $scope.isCollapsed = false;
});