Mark Jerly Bundalian Mark Jerly Bundalian - 1 month ago 13
AngularJS Question

Can't get ng-model's value if the value is assigned from another ng-model

I have encountered a problem with the model values of angular. I have three scope variables bound to inputs via ng-model via an object called

cfa
: the first is
amt_type
, the second is
amount
and the third is
comp
in which the value for
comp
will depend on the first 2 values, the
amt_type
and
amount
. But the problem is when I tried to display cfa.comp, it doesn't get displayed, and can only be displayed when you typed into the input bound to the
cfa.comp
model. How can I get the value of the ng-model 'cfa.comp' or is there any angular method to fix my problem? Here is the code snippet. Thanks a lot for helping. :)



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

app.controller('sampleCtrl', function($scope){
$scope.cfa = {};
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller = "sampleCtrl">
<select ng-model="cfa.amt_type">
<option value="D">Daily</option>
<option value="W">Weekly</option>
<option value="M">Monthly</option>
</select>

<input type="number" ng-model="cfa.amount" />

<input ng-if="cfa.amt_type == 'D'" type="number" ng-model="cfa.comp" value="{{cfa.amount * 7}}" />
<input ng-if="cfa.amt_type == 'W'" type="number" ng-model="cfa.comp" value="{{cfa.amount}}" />
<input ng-if="cfa.amt_type == 'M'" type="number" ng-model="cfa.comp" value="{{cfa.amount / 4}}" />

{{cfa.comp}}
</div>
</body>
</html>





Additional Info:

The codes above will be repeated several times with different model names and will be used to get the total. Say:



<input ng-if="cfa.amt_type == 'D'" type="number" ng-model="cfa.comp1" value="{{cfa.amount * 7}}" />
<input ng-if="cfa.amt_type == 'W'" type="number" ng-model="cfa.comp1" value="{{cfa.amount}}" />
<input ng-if="cfa.amt_type == 'M'" type="number" ng-model="cfa.comp1" value="{{cfa.amount / 4}}" />

<input ng-if="cfa.amt_type == 'D'" type="number" ng-model="cfa.comp2" value="{{cfa.amount * 7}}" />
<input ng-if="cfa.amt_type == 'W'" type="number" ng-model="cfa.comp2" value="{{cfa.amount}}" />
<input ng-if="cfa.amt_type == 'M'" type="number" ng-model="cfa.comp2" value="{{cfa.amount / 4}}" />

<input type="number" ng-model="cfa.total" value="{{cfa.comp1 + cfa.comp2}}" />





It is okay for me if I will put it in a div statement or any html tags, but how can I put the value in a variable or any way just to get the total? Thanks :)

Answer

You should make a function that gets called whenever the amt_type or amount changes, and remove the three inputs. See example below:

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

app.controller('sampleCtrl', function($scope){
   $scope.cfa = {};
   //this function will be bound to the ng-change of the select list and input for amount
   $scope.updateComp = function() {
       if ($scope.cfa.amount) {
           $scope.cfa.comp = $scope.cfa.amount;
           if ($scope.cfa.amt_type == 'D') {
               $scope.cfa.comp = $scope.cfa.amount * 7;
           }
           if ($scope.cfa.amt_type == 'M') {
               $scope.cfa.comp = $scope.cfa.amount / 4;
           }
       }
   };       
});
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller = "sampleCtrl">
  <select ng-model="cfa.amt_type" ng-change="updateComp()">
     <option value="D">Daily</option>
     <option value="W">Weekly</option>
     <option value="M">Monthly</option>
  </select>
  
  <input type="number" ng-model="cfa.amount" ng-change="updateComp()" />
<div> Comp: {{cfa.comp}} </div>
</div>
</body>
</html>

Comments