AngularJS - Dynamically Change Variable based on Another Variable

Question

I'm trying to figure out how to use a set of if-else statements to dynamically change a value in the DOM using Angular JS.

The value I want to change is basketballpayout.basketballpay based on what the value of the team's total salary is (payout.grossprod)

Here's the code:

<html>
<head>

    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
</head>
<body  ng-app="Payout">
<form novalidate ng-controller="PayoutCtrl">
    ENTER YOUR TEAM'S TOTAL SALARY <input type="text" name="Gross Production" placeholder="$"  ng-model="payout.grossprod"><br />
    ENTER YOUR CURRENT TEAM'S NET PAYOUT ACCOUNT <input type="text" name="Net Payout" placeholder="%"  ng-model="payout.currentpay"><br />
    <p >Current Payout: {{payout.currentpay}} %</p>
    <p>Current Yearly Compensation: {{payout.grossprod * payout.currentpay / 100 | currency }}</p><br />
    <p>basketball Payout: {{basketballpayout.basketballpay}} %</p>


</form>

var app = angular.module("Payout",[]);
app.controller("PayoutCtrl", function($scope) {
    $scope.payout= {currentpay: 0, grossprod: 0};
    $scope.basketballpayout= {basketballpay: "", basketballcom: 0, basketballdif: 0};

if ($scope.payout.grossprod === 0){ 
    $scope.basketballpayout.basketballpay="0";
    percent = 0;    
} else if ($scope.payout.grossprod < 175000){ 
    $scope.basketballpayout.basketballpay="20";
    percent = 0.20;
} else if ($scope.payout.grossprod < 200000){ 
    $scope.basketballpayout.basketballpay="25";
    percent = 0.25;
} else  {
    $scope.basketballpayout.basketballpay="60";
    percent = 0.60;
}

});

m59 · Accepted Answer · 2014-09-19 20:49:32Z

3

Just set the view binding to a function call rather than a property and have that function do the needed calculation.

Live Demo

<p>{{ foo() }}</p>

JS:

$scope.foo = function() {
  //calculate and return the desired binding
  return $scope.bar * $scope.baz;
};

The other problem you're having is that you're comparing strings as though they are numbers. You should use type="number" or you can use myNumber = parseInt($scope.myProp, 10) to get a number rather than a string.

edited Sep 19, 2014 at 20:49

answered Sep 19, 2014 at 19:19

m59

43.9k14 gold badges122 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

slayer9509 Over a year ago

Thanks but I still can't get it to work here's my JSFiddle, is there something I'm doing wrong? jsfiddle.net/6yatwLoL

E_net4 · Accepted Answer · 2019-04-11 13:30:34Z

This is a sample of how one select input is dependent on another select input.

<md-select name="inputName" ng-model="inputModel" 
    ng-change="anotherInputModel = (inputModel == 'Some Value') ? 'value of anotherInputModel' : (inputModel == 'Some other value') ? Some Another Value : ''>
    <md-option ng-value="val.value" ng-repeat="val in val">
        {{val.value}}
    </md-option>
</md-select>

<md-select name="anotherInput" ng-model="anotherInputModel">
    <md-option ng-value="value.value" ng-repeat="value in Values">
        {{value.name}}
    </md-option>
</md-select>

Collectives™ on Stack Overflow

AngularJS - Dynamically Change Variable based on Another Variable

2 Answers 2

Live Demo

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related