Temperature Median in Angularjs

Question

I am new to AngularJS and trying to learn by basic. All I am trying to do is: 1. I want to be able to enter any number of temperture records by entering a value and then clicking on the "Add" button. 2. When I click on the "Get Media Temperture" button, I want to be able to see the median of the entered tempertures records that I have entered

I have written something like this:

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

</head>

<body ng-controller="TemperatureCtrl">
  <h1>Temperature Monitor</h1>
  <form name="temp" novalidate>
    <label for="temperture">Add Temperture:</label>
    <input type="number" name="temperture" id="temperture" placeholder="Enter temperature here" required>
    <button>Add</button>
  </form>
  <hr />
  <section>
    <button>Get Median Temperture</button>
    <br>
    Current Median:
    <!-- display current median here-->
  </section>
  
</body>

</html>

For example if I have entered something like [5, 1, -7, 7, 8, 3] --> [-7, 1, 3, 5, 7, 8] = (3+5)/2 = 4` should be something which I should get.

JavaScript Logic and some help would be helpful. Thanks!

This is already answered here http://stackoverflow.com/questions/25305640/find-median-values-from-array-in-javascript-8-values-or-9-values — RedJandal, Jan 28 '16 at 01:50
I don't want to use any library, I need to use Angular and write the logic in controller to do it. Am I missing something? — user2959092, Jan 28 '16 at 01:54

score 1 · Answer 1 · answered Jan 28 '16 at 02:13

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <script>
            Array.prototype.max = function () {
                return Math.max.apply(Math, this);
            };

            Array.prototype.min = function () {
                return Math.min.apply(Math, this);
            };

            angular.module('App', []).controller(
                'AppController',
                [
                    '$scope',
                    function($scope) {
                        $scope.model = {
                            value: 0,
                            array: [0]
                        };

                        $scope.addValue = function () {
                            $scope.model.array.push($scope.model.value || 0);
                        };

                        $scope.getSomeCalcValue = function () {
                            return ($scope.model.array.max() + $scope.model.array.min()) / 2;
                        };
                    }
                ]
            );
        </script>
    </head>
    <body ng-app="App" ng-controller="AppController">
        <h1>Values Monitor</h1>
        <form name="temp">
            <label for="value">Add value:</label>
            <input ng-model="model.value" type="number" name="value" id="value" placeholder="Enter value here" />
            <button ng-click="addValue()">Add</button>
        </form>
        <hr />
        <section>
            Array: {{model.array.join(' ')}}
            <br />
            Some calc value: {{getSomeCalcValue()}}
        </section>
    </body>
</html>

user3412166: Its not running for me and I am not able to understand what you did in section. — user2959092, Jan 28 '16 at 02:19
I was just trying to show how you can associate a template (with calculated expressions) and model. — Aleksandr Shumaher, Jan 28 '16 at 02:23
Ohh ok, I am sorry, I am new in Angular and Was trying this side by side so got confused. Let me look more and see this. Thanks! — user2959092, Jan 28 '16 at 02:25
Of course! You can read on the angular's site. https://docs.angularjs.org/guide/expression for example. Go to Example part and view index.hml and script.js. — Aleksandr Shumaher, Jan 28 '16 at 02:30

score 0 · Answer 2 · answered Jan 28 '16 at 02:02

You don't want to use AngularJS to do the calculation. This can be done in plain JavaScript and AngularJS has nothing to do with this except binding user input data and result to HTML elements.

function find_median(numbers) {

    var median = 0;
    var size = numbers.length;

    numbers.sort();
    console.log(numbers);

    if (size % 2 === 0) {
       median = (numbers[size / 2 - 1] + numbers[size / 2]) / 2;
    } else {

       median = numbers[(size - 1) / 2];
    }
   return median;
}

Bunti, Thanks, But can you help me how to bind this javascript to my frontend which I have written? — user2959092, Jan 28 '16 at 02:10

Temperature Median in Angularjs

2 Answers2