Trường nhập JS cập nhật góc sau khi thay đổi

Question

Tôi đang cố gắng xây dựng một máy tính đơn giản trong Góc mà tôi có thể ghi đè tổng số nếu muốn. Tôi có phần này làm việc nhưng khi tôi quay trở lại để nhập vào một số trong các lĩnh vực một hoặc hai tổng số không được cập nhật trong lĩnh vực này.

Đây là jsfiddle tôi http://jsfiddle.net/YUza7/2/

Dạng

<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> 

Các javascript

function TodoCtrl($scope) { 
    $scope.total = function(){ 
     return $scope.one * $scope.two; 
    }; 
} 

Answer 1

Bạn có thể thêm ng-change chỉ thị vào các trường nhập. Hãy xem tài liệu example.

Answer 2

Tôi đoán rằng khi bạn nhập một giá trị vào trường tổng số mà biểu hiện giá trị bằng cách nào đó được ghi đè.

Tuy nhiên, bạn có thể thực hiện một cách tiếp cận thay thế: Tạo trường cho tổng giá trị và khi các thay đổi one hoặc two cập nhật trường đó.

<li>Total <input type="text" ng-model="total">{{total}}</li> 

Và thay đổi javascript:

function TodoCtrl($scope) { 
    $scope.$watch('one * two', function (value) { 
     $scope.total = value; 
    }); 
} 

Ví dụ fiddle here.

Answer 3

Tạo chỉ thị và đặt đồng hồ trên đó.

app.directive("myApp", function(){ 
link:function(scope){ 

    function:getTotal(){ 
    ..do your maths here 

    } 
    scope.$watch('one', getTotals()); 
    scope.$watch('two', getTotals()); 
    } 

})

Answer 4

Bạn chỉ cần sửa định dạng của html của bạn

<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> 

http://jsfiddle.net/YUza7/105/

Answer 5

tôi đã viết một chỉ thị, bạn có thể sử dụng để ràng buộc một ng-mô hình cho bất kỳ biểu thức bạn muốn. Bất cứ khi nào biểu thức thay đổi, mô hình được đặt thành giá trị mới.

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(); 
      }); 
     } 
    }); 

Bạn có thể sử dụng nó trong các mẫu của bạn như thế này:

<li>Total<input type="text" ng-model="total" bound-model="one * two"></li>