Can't get ng-model's value if the value is assigned from another ng-model
Question
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 :)
2 answers
solution1
0 2016-10-11 04:19:05
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>
solution2
0 2016-10-11 04:34:38
Your ng-model and value attributes are conflicting for cfa-comp. I personally like the "controller as" and vm syntax, so I will offer that alternative. Also, the result field should be read-only.
var app = angular.module('myApp', []); app.controller('sampleCtrl', function(){ vm = this; vm.getComp = function() { switch (vm.amt_type) { case 'D': return vm.amount * 7; case 'W': return vm.amount; case 'M': return vm.amount / 4; default: return undefined; } } });
#comp { margin-left: 5px; }
<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 as ctrl"> <select ng-model="ctrl.amt_type"> <option value="D">Daily</option> <option value="W">Weekly</option> <option value="M">Monthly</option> </select> <input type="number" ng-model="ctrl.amount" /> <span id="comp">{{ctrl.getComp()}}</span </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.