Angular - Bootstrap Grid

by douglasloyo

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.4/sortable.min.js"></script>
<div ng-app="myApp">
<div ng-controller="homeController">
<fieldset>
    <legend>Data Config:</legend>
    <ul ui-sortable ng-model="headers">
      <li ng-repeat="header in headers"><input type="checkbox" ng-model="header.display">{{header.key}}</li>
    </ul>
</fieldset>

<div class="alert alert-info">
    <p>Headers: {{headers}}</p>
    <p>Filters: {{search}}</p>
    <p>Sort: {{sorting}}</p>
    <p>Record Count: {{ filtered.length }}</p>
</div>
  
<fieldset>
    <legend>Filters:</legend>
    <form>
    
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon"><i class="fa fa-search"></i></div>
          <input type="text" class="form-control" placeholder="Search any field" ng-model="search.$">
        </div>      
      </div>
    
    <div class="form-inline">
    
    
    <!--To be added dynamically-->
    <div class="form-group">
    <label for="infractionCode">Infraction Code:</label>
    <select id="infractionCode" ng-model="search.infractionCode" class="form-control">
      <option value="0" selected>-- Select --</option>
      <option ng-repeat="option in data | unique:'infractionCode'" value="{{option.infractionCode}}">{{option.infractionCode}}</option>
    </select>
    </div>
     
    <div class="form-group">
    <label for="action">Action:</label>
    <select id="action"...

CSS

body{
  padding:10px 20px;
}

ul {
    border: 1px solid black;
}

JavaScript

/* Application */
var myApp = angular.module('myApp', ['ui', 'ui.sortable']);

myApp.controller('homeController', function ($scope, $http) {
	//$scope.hello = "Hi!";
  $scope.sorting = {type:"Id", reverse:false};
  $scope.data=[];
  $scope.headers=[];
 
  // Process the headers
  var processHeaders = function(data){
  	var sampleRow = data[0];
    angular.forEach(sampleRow, function(value, key) {
        $scope.headers.push({key:key, display:true});
    });
    
    console.log($scope.headers);
  };
  
	// Using www.myJson.com for storing sample JSON
	$http.get("https://api.myjson.com/bins/4nd9w").then(function(response){
  	// Assign the data
    $scope.data = response.data;
    processHeaders($scope.data);
  });
  
});