Campo de entrada de atualização Angular JS após alteração
-
12-12-2019 - |
Pergunta
Estou tentando construir uma calculadora simples em Angular na qual posso substituir o total se quiser.Tenho essa parte funcionando mas quando volto para inserir um número nos campos um ou dois o total não é atualizado no campo.
Aqui está meu jsfiddle http://jsfiddle.net/YUza7/2/
A forma
<div ng-app>
<h2>Calculate</h2>
<div ng-controller="TodoCtrl">
<form>
<li>Number 1: <input type="text" ng-model="one">
<li>Number 2: <input type="text" ng-model="two">
<li>Total <input type="text" value="{{total()}}">
{{total()}}
</form>
</div>
</div>
O javascript
function TodoCtrl($scope) {
$scope.total = function(){
return $scope.one * $scope.two;
};
}
Solução
Você pode adicionar ng-change
diretiva para campos de entrada.Dê uma olhada nos documentos exemplo.
Outras dicas
Suponho que quando você insere um valor no campo de totais, essa expressão de valor de alguma forma é substituída.
No entanto, você pode adotar uma abordagem alternativa:Crie um campo para o valor total e quando one
ou two
alterações atualizam esse campo.
<li>Total <input type="text" ng-model="total">{{total}}</li>
E altere o javascript:
function TodoCtrl($scope) {
$scope.$watch('one * two', function (value) {
$scope.total = value;
});
}
Exemplo de violino aqui.
Eu escrevi uma diretiva que você pode usar para vincular um modelo ng a qualquer expressão desejada.Sempre que a expressão muda, o modelo é definido com o novo valor.
module.directive('boundModel', function() {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ngModel) {
var boundModel$watcher = scope.$watch(attrs.boundModel, function(newValue, oldValue) {
if(newValue != oldValue) {
ngModel.$setViewValue(newValue);
ngModel.$render();
}
});
// When $destroy is fired stop watching the change.
// If you don't, and you come back on your state
// you'll have two watcher watching the same properties
scope.$on('$destroy', function() {
boundModel$watcher();
});
}
});
Você pode usá-lo em seus modelos como este:
<li>Total<input type="text" ng-model="total" bound-model="one * two"></li>
Você só precisa corrigir o formato do seu html
<form>
<li>Number 1: <input type="text" ng-model="one"/> </li>
<li>Number 2: <input type="text" ng-model="two"/> </li>
<li>Total <input type="text" value="{{total()}}"/> </li>
{{total()}}
</form>
Crie uma diretiva e vigie-a.
app.directive("myApp", function(){
link:function(scope){
function:getTotal(){
..do your maths here
}
scope.$watch('one', getTotals());
scope.$watch('two', getTotals());
}
})