2012-08-08 20 views
6

Với Knockout, tôi có thể nóiLàm cách nào để AngularJS chạy lại chức năng mỗi khi dữ liệu sử dụng thay đổi?

<html> 
    <head> 
     <script type="text/javascript" src="knockout-2.1.0.js"></script> 
    </head> 
    <body> 
     <input type="text" data-bind="value: a"></input> + 
     <input type="text" data-bind="value: b"></input> = 
     <span data-bind="text: result"></span> 
     <script type="text/javascript"> 
      function ExampleViewModel() { 
       this.a = ko.observable(5); 
       this.b = ko.observable(6); 
       this.result = ko.computed(function() { 
        return parseInt(this.a()) + parseInt(this.b()); 
       }, this); 
      } 

      ko.applyBindings(new ExampleViewModel()); 
     </script> 
    </body> 
</html> 

result sẽ được tính toán lại mỗi khi một sự thay đổi và b. Làm thế nào tôi có thể nhận được AngularJS để làm điều này cho tôi? Tôi đã cố gắng

<html ng-app> 
    <head> 
     <script type="text/javascript" src="angular-1.0.1.min.js"></script> 
     <script type="text/javascript"> 
      function ExampleCtrl($scope) { 
       $scope.a = 5; 
       $scope.b = 6; 
       $scope.result = function() { 
        return this.a + this.b 
       }; 
      } 

</script> 
    </head> 
    <body ng-controller="ExampleCtrl"> 
     <input type="text" value="{{ a }}"></input> + 
     <input type="text" value="{{ b }}"></input> = 
     {{ result() }} 
    </body> 
</html> 

Sau một chút đọc nhiều hơn, tôi thấy ng-change:

<html ng-app> 
    <head> 
     <script type="text/javascript" src="angular-1.0.1.min.js"></script> 
     <script type="text/javascript"> 
      function ExampleCtrl($scope) { 
       $scope.a = 5; 
       $scope.b = 6; 
       $scope.result = function() { 
        return parseInt($scope.a) + parseInt($scope.b) 
       }; 
      } 

</script> 
    </head> 
    <body ng-controller="ExampleCtrl"> 
     <input type="text" ng-model="a" ng-change="result()"></input> + 
     <input type="text" ng-model="b" ng-change="result()"></input> = 
     {{ result() }} 
    </body> 
</html> 

Nhưng điều đó đòi hỏi tôi phải theo dõi thực tế rằng việc thay đổi a hoặc b thay đổi result(), là có cách nào tự động phát hiện điều này?

+0

bạn đã thử $ xem? http://docs.angularjs.org/api/ng.$rootScope.Scope – Eduardo

Trả lời

7

chức năng result() của bạn sẽ được đánh giá lại bất cứ khi nào mô hình thay đổi khi ràng buộc qua ng-model ở đầu vào của bạn như thế này:

<input type="text" ng-model="a"></input> 

thay vì:

<input type="text" value="{{ a }}"></input> 
+0

Dường như chỉ sử dụng công cụ mô hình ng (tôi không cần phải chỉ định ng-thay đổi), cảm ơn. Đáng buồn thay, nó cập nhật ngay lập tức. Có cách nào để chỉ cập nhật nó một khi tiêu điểm rời khỏi đầu vào? –

+0

Bài đăng này có thể giúp trì hoãn thay đổi mô hình khi tiêu điểm rời khỏi đầu vào: http://stackoverflow.com/a/11870341/1207991 – Gloopy

Các vấn đề liên quan