How can you calculate the ratio of one property value to another in AngularJS?

Question

How can you calculate the ratio of one property value to another in AngularJS?

In my code, I am using ng-repeat to display data values from an object.

<div ng-controller="myctrl">
  <ul ng-repeat="number in numbers">
    <li><span ng-bind="number.first"></span></li>
    <li><span ng-bind="number.second"></span></li>
    <li><span ng-bind="number.third"></span></li>
  </ul>
</div>

However, one of the property values in the object is dependent on the value of other properties (I want the value of third to be equal to first divided by second).

.controller('myctrl', function($scope) {

    $scope.numbers = [
        {
        first: 8,
        second: 5,
        third: ? // (I need this to be first / second)
        },

        {
        first: 4,
        second: 5,
        third: ? // (I need this to be first / second)
        }
  ];

});

I am struggling with setting this up correctly as I find it harder than expected. It's been a while since I worked with AngularJS or JavaScript, so chances are I have approached the ng-repeat incorrectly.

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

To achieve this functionality, you can either perform the division in the view by dividing the first key with the second (

<li><span ng-bind="number.first/number.second"></span></li>

), or utilize a getter in the controller.

A getter is a method that retrieves the value of a specific property.

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

myApp.controller('MainController', function($scope) {
  $scope.numbers = [{
    first: 8,
    second: 5,
    get third() {
      return this.first / this.second
    }
  }, {
    first: 4,
    second: 5,
    get third() {
      return this.first / this.second
    }
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='myApp' ng-controller="MainController">
  <ul ng-repeat="number in numbers">
    <li><span ng-bind="number.first"></span>
    </li>
    <li><span ng-bind="number.second"></span>
    </li>
    <li><span ng-bind="number.third"></span>
    </li>
  </ul>
</body>

Fiddle Demo

Answer 2

To achieve this functionality, you can either perform the division in the view by dividing the first key with the second (

<li><span ng-bind="number.first/number.second"></span></li>

), or utilize a getter in the controller.

A getter is a method that retrieves the value of a specific property.

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

myApp.controller('MainController', function($scope) {
  $scope.numbers = [{
    first: 8,
    second: 5,
    get third() {
      return this.first / this.second
    }
  }, {
    first: 4,
    second: 5,
    get third() {
      return this.first / this.second
    }
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='myApp' ng-controller="MainController">
  <ul ng-repeat="number in numbers">
    <li><span ng-bind="number.first"></span>
    </li>
    <li><span ng-bind="number.second"></span>
    </li>
    <li><span ng-bind="number.third"></span>
    </li>
  </ul>
</body>

Fiddle Demo

Answer 3

Answer №2

In case the third number in the object is not required and can be null or completely omitted, you can handle it as follows:

$scope.numbers = [
  {
    first: 8,
    second: 5,
    third: null /* unnecessary property */
  },
  {
    first: 4,
    second: 5,
    third: null
  }
];

<ul ng-repeat="number in numbers">
  <li><span ng-bind="number.first"></span></li>
  <li><span ng-bind="number.second"></span></li>
  <li><span ng-bind="(number.first / number.second)"></span></li>
</ul>

Answer 4

In case the third number in the object is not required and can be null or completely omitted, you can handle it as follows:

$scope.numbers = [
  {
    first: 8,
    second: 5,
    third: null /* unnecessary property */
  },
  {
    first: 4,
    second: 5,
    third: null
  }
];

<ul ng-repeat="number in numbers">
  <li><span ng-bind="number.first"></span></li>
  <li><span ng-bind="number.second"></span></li>
  <li><span ng-bind="(number.first / number.second)"></span></li>
</ul>

Answer 5

Answer №3

give this a shot

let application = angular.module("application",[]);

application.controller("mycontroller" , function($scope){
  
$scope.variables = [
        {
        value1: 8,
        value2: 5,
      
        },

        {
        value1: 4,
        value2: 5,
      
        }
];

});

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   

  
  <body>   
<div ng-app="application">       
<div ng-controller="mycontroller">
     <ul ng-repeat="variable in variables">
      <li><span ng-bind="variable.value1"></span></li>
      <li><span ng-bind="variable.value2"></span></li>
      <li><span ng-bind="variable.value1 / variable.value2"></span></li>
    </ul>
    </div>
  </div>

  </body>
  
  
</html>

Answer 6

give this a shot

let application = angular.module("application",[]);

application.controller("mycontroller" , function($scope){
  
$scope.variables = [
        {
        value1: 8,
        value2: 5,
      
        },

        {
        value1: 4,
        value2: 5,
      
        }
];

});

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   

  
  <body>   
<div ng-app="application">       
<div ng-controller="mycontroller">
     <ul ng-repeat="variable in variables">
      <li><span ng-bind="variable.value1"></span></li>
      <li><span ng-bind="variable.value2"></span></li>
      <li><span ng-bind="variable.value1 / variable.value2"></span></li>
    </ul>
    </div>
  </div>

  </body>
  
  
</html>

How can you calculate the ratio of one property value to another in AngularJS?

Answer №1

Fiddle Demo

Answer №2

Answer №3

Similar questions

How can I prevent the state from being overridden in the reducer function when updating the State Context API?

What is the method for dividing a string using capital letters as a delimiter?

In order to display the particle-slider logo effect, the JavaScript on the page needs to be refreshed

Traverse a computed attribute in Vue.js

Retrieve the native interface from the Puppeteer browser/page context

Modify the readonly property of an input element in ReactJS

Submitting a JSPX form to interact with PHP backend

Sharing server object in expressJS with another file through module.exports

Error encountered: The module '@mui/x-data-grid' does not export 'GridActionsCellItem'

How can I troubleshoot the unresponsive remove div function on my website?

Transmitting Various Static Files via Express Router

Is requesting transclusion in an Angular directive necessary?

Issue with calling function from props in React is not being resolved

Enable vertical scrolling on the second row of a table while keeping the first row fixed as the table header (CSS)

What is the best method for launching a new window or tab in AngularJS?

Can you explain the contrast between the functions 'remove' and 'removeChild' in JavaScript?

What is the proper way to incorporate a ref within a class component?

The Flask CORS issue arises from the absence of the Access-Control-Allow-Origin header when using the redirect() function

What is the best way to pass multiple parameters along with the context to a URL in Vuex?

TS2307 Error: The specified module (external, private module) could not be located