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>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div ng-app="sortingApp" ng-controller="bubbleSortController">
    <h1>{{pageHeader}}</h1>
    <h3>{{pageDesc}}</h3>
    <div>
      <label for="algorithmList">Select an Algorithm:</label>
      <select name="algorithmList" id="algorithmList" ng-model="something">
        <option ng-repeat="algorithm in algorithmList" value="{{algorithm.id}}">{{algorithm.name}}</option>
      </select>
    </div>
    <div>
      <label for="array">Input comma delimited array:</label>
      <input type="text" ng-model="array" name="array" id="array" placeholder="ex 1,2,3">
    </div>
    <button ng-click="sort()">Sort</button>
    <div ng-if="results.length > 0">
        <table class="sortedSteps" border="1">
           <tr ng-repeat="row in results">
             <td ng-repeat="col in row" ng-class="col.changed ? 'changed' : ''">
               {{col.value}}
             </td>
           </tr>
        </table>
      </div>
  </div>
</div>

CSS

.changed {
  background-color: lightgreen;
}

JavaScript

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

app.controller("bubbleSortController", function($scope, $http) {
	$scope.pageHeader = "Sorting Algorithms";
  $scope.pageDesc = "Simple application for demonstrating the different sorting algorithms. Sorted values will be highlighted in each step of the sorting process";
  $scope.algorithmList = [
                         	{name: "Bubble Sort", id: "bubble"}
                          ,{name: "Selection Sort", id: "selection"}
                          ,{name: "Merge Sort", id: "merge"}
                         ];
  $scope.array = "";
  $scope.results = [];
  $scope.something = "";
  $scope.baseURI = "http://localhost:8080/sort/";
  
  $scope.sort = function() {
  	var uri = "http://localhost:8080/sort/" + $scope.something + '/' + $scope.array;
  	
    $http.get(uri)
    	.then(function(response) {
        $scope.results = response.data;
        console.log("data:", response.data);
      },function() {
      	alert("Something went wrong")
      });
  }
});