angularJs中输入框的动态默认值
我从一个控制器和两个输入框中得到一个值。 每当我在一个输入框中输入任何值时,我都需要它。使用angularJs,从控制器和输入框中检索到的值的差异将显示在另一个输入框中。 e、 g:- {{sum}}-->是我从控制器获得的值angularJs中输入框的动态默认值,angularjs,service,watch,Angularjs,Service,Watch,我从一个控制器和两个输入框中得到一个值。 每当我在一个输入框中输入任何值时,我都需要它。使用angularJs,从控制器和输入框中检索到的值的差异将显示在另一个输入框中。 e、 g:- {{sum}}-->是我从控制器获得的值 <input type="number" ng-model="firstnumber" /> <input type="number" ng-model="secondnumber"/> 在我定义的控制器中 $scope.$watch('fir
<input type="number" ng-model="firstnumber" />
<input type="number" ng-model="secondnumber"/>
在我定义的控制器中
$scope.$watch('firstnumber', function(newValue, oldValue) {
var sum=cmModalService.getSum();
if(newValue!=null)
{ secondnumber = sum -firstnumber;
}
});
$scope.$watch('secondnumber', function(newValue, oldValue) {
var sum=cmModalService.getSum();
if(newValue!=null)
{ firstnumber = sum -secondnumber;
}
});
但每当我改变输入框中的值时,流就永远不会进入watch方法,值也不会改变。
有没有其他方法也能做到这一点
我也尝试过使用ng change,但仍然无法得到确切的结果
在控制器内部,我将更改方法定义为
$scope.changefirstnumber=function(firstnumber, sum){
$scope.secondnumber = sum- firstnumber;
};
$scope.changesecondnumber=function(secondnumber, sum){
$scope.firstnumber= sum- secondnumber;
};
和html格式
[Plunker link]您没有设置作用域变量。试试这个
$scope.$watch('firstnumber', function(newValue, oldValue) {
var sum=cmModalService.getSum();
if(newValue!=null)
{ $scope.secondnumber = sum -$scope.firstnumber;
}
});
$scope.$watch('secondnumber', function(newValue, oldValue) {
var sum=cmModalService.getSum();
if(newValue!=null)
{ $scope.firstnumber = sum - $scope.secondnumber;
}
});
编辑
你提供了一些新信息,这就是你想要的吗
原始答案
关于我的评论,如果您需要访问控制器中的总数,您可以像这样保存firstnumber
和secondnumber
的val
html:
你为什么不能只做
{{firstnumber+secondnumber}}
?我不明白,你的意思是你想用另外两个输入框中的值之和填充另一个输入框?我的意思是当我在输入框中输入一个值时,其他输入框中的值应该自动变成{sum firstnumber},反之亦然sum
等于什么?根据您的服务,它是一个空对象。您计划如何向对象添加数字?你不能用你描述的方式来描述我从另一个控制员那里得到的金额这不是我想要的want@Eftakhar那么,你的问题需要更清楚,更清楚specific@pankajparkar-感谢您添加plunkr。我没有机会尝试它。它之所以能工作是因为它的逻辑性。否则,$watch将无限期地执行,因为一个手表正在修改另一个手表的值。这就是我试图指出的。但在这种情况下,此got将失败..:p@ronnie我已经编辑了这个问题,这样你就会明白我真正想要的是什么
$scope.$watch('firstnumber', function(newValue, oldValue) {
var sum=cmModalService.getSum();
if(newValue!=null)
{ $scope.secondnumber = sum -$scope.firstnumber;
}
});
$scope.$watch('secondnumber', function(newValue, oldValue) {
var sum=cmModalService.getSum();
if(newValue!=null)
{ $scope.firstnumber = sum - $scope.secondnumber;
}
});
var app = angular.module('myApp',[]);
app.controller('MyController', function($scope,cmModalService)
{
$scope.firstnumber = 5;
$scope.secondnumber = 10;
$scope.$watch('firstnumber', function()
{
$scope.total = cmModalService.getSum() - $scope.firstnumber
});
$scope.$watch('secondnumber', function()
{
$scope.total = cmModalService.getSum() - $scope.secondnumber;
});
});
app.controller('MySecondController', function($scope,cmModalService)
{
$scope.rand = Math.round(Math.random() * 100);
cmModalService.setSum($scope.rand);
});
app.service('cmModalService', function()
{
var sum;
return {
getSum: function()
{
return sum;
},
setSum: function(value)
{
sum = value;
}
}
});
var app = angular.module('myApp',[]);
app.controller('MyController', function($scope)
{
$scope.firstnumber = 5;
$scope.secondnumber = 10;
$scope.$watch('firstnumber', function()
{
$scope.total = $scope.firstnumber + $scope.secondnumber;
});
$scope.$watch('secondnumber', function()
{
$scope.total = $scope.firstnumber + $scope.secondnumber;
});
});
<body ng-app="myApp">
<div ng-controller="MyController">
<input type="number" ng-model="firstnumber" />
<br>
<input type="number" ng-model="secondnumber"/>
<br>
{{total}}
</div>
</body>
var app = angular.module('myApp',[]);
app.controller('MyController', function($scope)
{
$scope.firstnumber = 5;
$scope.secondnumber = 10;
$scope.$watchGroup(['firstnumber','secondnumber'], function()
{
$scope.total = $scope.firstnumber + $scope.secondnumber;
});
});