Guide to utilizing various functions, with equations, within a specific scope in angularJS

myApp.controller('incomeController', ['$scope', function($scope) {
  $scope.pay = 0;
  $scope.hours = 0;
     $scope.tax=0.19297;
    
    $scope.total = function() {
    return $scope.pay * $scope.hours;}

    
        $scope.taxTotal = function ($scope){
          return($scope.total * $scope.tax);}
        

            $scope.afterTaxTotal = function ($scope){
                return($scope.total - $scope.taxTotal);}

  

 }]);
<div ng-app="myApp" ng-controller="incomeController">
  <h2>Income Calculator</h2>
    <br>
    <br>
  
    <p16>Pay Rate: </p16><input type="number" ng-model="pay"> 
   <p15> Hours worked:</p15> <input type="number" ng-model="hours">
    <br>
    <br>
    <br>


     <p><b>Total Before Taxes:</b> {{ total() | currency : $ }}</p>
    
    
    </div>

    <p><b>Total Taxes :</b> {{ taxTotal() | currency : $ }}</p>



<p><b>Total After Taxes:</b> {{ afterTaxTotal() | currency : $ }}</p>

I am attempting a basic math exercise.

  1. Input two numbers from the user.
  2. Multiply the input numbers together.
  3. Multiply the result of step 2 by a fixed value.
  4. Subtract the result in step 2 from step 1.

Answer №1

Make sure to include the parenthesis when calling your functions inside the controller.

      function MyCtrl($scope) {
        $scope.pay = 5;
        $scope.hours = 10;
        $scope.tax= 0.19297;

        $scope.total = function() { 
          return $scope.pay * $scope.hours;
         };

        $scope.taxTotal = function () { 
         return $scope.total() * $scope.tax;
        };

        $scope.afterTaxTotal = function () { 
            return $scope.total() - $scope.taxTotal();
        };


      }

Check out this example: http://jsfiddle.net/m62f70mk/5/

Remember, you don't need to pass $scope as it is already available inside your functions. And make sure your paragraph tags are correct!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges faced when subscribing to global events in JavaScript

I have some questions about the JavaScript code snippet below: What does .events.slice(-1)[0][0] signify? Similarly, could you explain the purpose of nodes_params += "&ns=" + GLOBAL_EVENT + "," + start_from + ",-,-";? Could you elaborate on what is m ...

Safeguarding intellectual property rights

I have some legally protected data in my database and I've noticed that Google Books has a system in place to prevent copying and printing of content. For example, if you try to print a book from this link, it won't appear: How can I protect my ...

What methods are available to change one JSON format into another?

I am receiving JSON data from a Laravel API in the following format: [ { "id":48, "parentid":0, "title":"Item 1", "child_content":[ { "id":49, "parentid":48, "title":"Itema 1 ...

Issue with People Picker directive causing AngularJS validation to fail

I have implemented a SharePoint client-side people picker in my form using the directive from this GitHub repository. However, I am facing an issue where the validation of my form fails and the button remains disabled. When I remove the field, the validati ...

The mobile navigation in HTML has a slight issue with the ::after pseudo-element, specifically within the

As I prepare to launch my website, I have made adjustments to the mobile layout by moving the navigation links to a navigation drawer. The template I am using included JavaScript scripts to handle this navigation change. However, I encountered an issue whe ...

getting the child td element within a tr using a variable that changes dynamically

I'm facing an issue where I am trying to access the <td> of a <tr> using the jQuery .eq() function. The code snippet below illustrates what I am attempting: var foundElement = 3; var values = $(this).children("td:nth-child('" + foun ...

Retrieve error messages from API while utilizing Next-auth

Is it possible for Next-auth to handle API errors and pass them to the client-side? For example, our mobile app successfully handles API responses indicating incorrect email or password. However, on our website using Next-auth, we want to modify the retur ...

Using React's useState hook with an array of objects

When I have 3 different inputs, my goal is to capture their states while updating the onChange input attribute. The desired state format should be structured as follows: [{lang: (inputName), text: (inputValue)}, ..]. This is what I attempted: function onC ...

A Guide to Effectively Extracting Data from Second Level JSON Arrays with

Hi, I'm having difficulty fetching the two attributes under CategoryImage in the second level of the JSON array parsing. Can someone help me with this? Thank you. <script> $(document).ready(function() { var cat=""; ...

React code to automatically scroll to the top of the page when the user clicks the

Whenever the URL changes or the page is reloaded in my project, I need it to scroll back to the top. While most scenarios work fine, I'm encountering an issue with the browser's back button. Despite a change in the pathname, the page fails to scr ...

Tips for retrieving the Solana unix_timestamp on the front-end using JavaScript

Solana Rust smart contracts have access to solana_program::clock::Clock::get()?.unix_timestamp which is seconds from epoch (midnight Jan 1st 1970 GMT) but has a significant drift from any real-world time-zone as a result of Solana's processing delays ...

Avoiding the utilization of HTML forms

Is it acceptable to send form information using jQuery instead of creating an HTML form? By skipping the traditional HTML form and using $.ajax in jQuery, are there any security, performance, or semantic issues to be concerned about? Does this approach a ...

The jQuery function throws an Error that is not caught by the surrounding try / catch block

Recently, I've been enhancing error handling in my JavaScript objects that heavily utilize jQuery. However, I've run into an issue where throwing a new Error from within a jQuery method is not caught by the surrounding catch statement. Instead, i ...

Error message 'AVV_ERR_PLUGIN_NOT_VALID' encountered within fastify

I've encountered an issue while setting up the environmental variables in my fastify - react app. Can someone help me with resolving the 'AVV_ERR_PLUGIN_NOT_VALID' error that I'm receiving for the following fastify code? Your assistance ...

The data from my API is not showing up in my React application

Im working on a project where I am trying to retrieve an image of a recipe card from and display it on my react.js application. However, I am encountering difficulties in getting the API data to show up on the page when running the code. Any assistance wo ...

The functionality of ng-switch appears to be malfunctioning

Take a look at this code snippet: <script src="angular.min.js"></script> <script src="jquery-1.6.4.js"></script> <script type="text/javascript"> var app = angular.module('myApp', []); app.controller("myContr ...

How can I successfully add an element to a nested array without making any mistakes in saving it?

Hello everyone, I'm new here. I previously posted about a similar issue, but now I have a different one. I am encountering this object: singleChat = [ { "chatid": 10000414, "connected": true, "index": 0, ...

Is it possible to make a call to an endpoint from within the node project?

I'm currently working on a MERN app that dynamically adds meta tags to React pages without using server-side rendering. In order to achieve this, I need to extract the query parameters from the main server file and assign the relevant metadata content ...

Wookmark js isn't designed to generate columns from scratch

I am attempting to utilize the Wookmark jQuery plugin in order to create a layout similar to Pinterest. However, I am encountering an issue where Wookmark is not creating columns within the li elements, instead it is simply stacking images on top of each o ...

Enhancing communication between controllers and HTML in AngularJS through scope updates

I have created a new functionality within a telerik grid that tracks the ID of a record. When a row is selected in the grid, the associated service updates the data successfully. However, I am facing an issue where the controller responsible for navigation ...