AngularJS - Bubble Sort

Creating angularJS view to retrieve sorted 2D array based on selected algorithm

by M Greene

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="sortingApp" ng-controller="bubbleSortController">
  <h1>{{pageHeader}}</h1>
  <h3>{{pageDesc}}</h3>
  <div class="col-sm-6 col-sm-offset-3">
    <table id="bubbleSort" border="1" ng-bind-html="getSortedTable(sortedArray)"></table>  
  </div>
  
</div>

CSS

.changed {
  background-color: lightgreen;
}

JavaScript

var app = angular.module("sortingApp", []);

app.controller("bubbleSortController", ['$scope', '$sce', function($scope, $sce) {
	$scope.pageHeader = "Bubble Sort";
  $scope.pageDesc = "Implementation of the Bubble Sort Algorithm (flipped values marked in green)";
  $scope.sortedArray = [[1,2,5,3,4], [1,2,3,5,4], [1,2,3,4,5]];
  
  $scope.getSortedTable = function(sortedArray) {
  	var rows = "<tr>";
    
    //load first row
    for (var i=0; i<sortedArray[0].length; i++) {
    	rows += "<td>" + sortedArray[0][i] + "</td>"
    }
    //for each row, check for sorted pairs
    for (var i=1; i<sortedArray.length; i++) {
    	rows += "</tr><tr>";
      for (var j=0; j<sortedArray[i].length; j++) {
      	rows += "<td" + ((sortedArray[i][j] != sortedArray[i-1][j]) ? " class='changed'>" : ">") + sortedArray[i][j] + "</td>";
      }
    }
    
    rows += "</tr>";
    return $sce.trustAsHtml(rows);
  };
}]);