Поле ввода обновления Angular JS после изменения
-
12-12-2019 - |
Вопрос
Я пытаюсь создать простой калькулятор в Angular, в котором я могу переопределить сумму, если захочу.У меня эта часть работает, но когда я затем возвращаюсь, чтобы ввести число в одно или два поля, общая сумма в поле не обновляется.
Вот мой jsfiddle http://jsfiddle.net/YUza7/2/
Форма
<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>
Javascript
function TodoCtrl($scope) {
$scope.total = function(){
return $scope.one * $scope.two;
};
}
Решение
Можете добавить ng-change
директива для полей ввода.Посмотрите документы пример.
Другие советы
Я предполагаю, что когда вы вводите значение в поле итогов, это выражение значения каким-то образом перезаписывается.
Однако вы можете использовать альтернативный подход:Создайте поле для общего значения и когда либо one
или two
изменения обновляют это поле.
<li>Total <input type="text" ng-model="total">{{total}}</li>
И измените javascript:
function TodoCtrl($scope) {
$scope.$watch('one * two', function (value) {
$scope.total = value;
});
}
Пример скрипки здесь.
Я написал директиву, которую вы можете использовать для привязки NG-модели к любому выражению, которое вы хотите.Всякий раз, когда выражение изменяется, модель устанавливается на новое значение.
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();
});
}
});
.
Вы можете использовать его в своих шаблонах, как это:
<li>Total<input type="text" ng-model="total" bound-model="one * two"></li>
. Вам просто нужно исправить формат вашего 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>
.
Создайте директиву и поставьте на него часы.
app.directive("myApp", function(){
link:function(scope){
function:getTotal(){
..do your maths here
}
scope.$watch('one', getTotals());
scope.$watch('two', getTotals());
}
.
})