AngularJS雙向綁定，手動實施觀察

時間 2019-11-22

標籤 angularjs 雙向綁定手動實施觀察欄目 AngularJS 简体版

原文原文鏈接

實現這樣的一個需求：頁面中某個地方顯示某個文本框的值通過計算獲得的結果,並且是文本框值每次變化顯示的計算結果也跟着動態變化。html

在controller中能夠聲明一個對象，它的一個字段用來存儲初始值：app

$scope.funding = {startingEstimate:0};函數

以上，聲明瞭一個funding對象，它的startingEstimate字段用來存儲初始值，初始值這裏是0.spa

在controller中還應該聲明一個函數，用來把根據初始值計算獲得的結果賦值給funding對象的另一個字段。雙向綁定

$scope.computeNeeded = function(){
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};orm

以上，聲明瞭computeNeeded函數，它把funding對象startingEstimate值進過計算後的結果賦值給了funding對象的另一個字段needed。htm

好了，頁面中的input須要和funding對象的startingEstimate雙向綁定起來，用ng-model；input中每次值變化須要調用computeNeeded，用ng-change：對象

初始值：<input type="text" ng-model="funding.startingEstimate" ng-change="computeNeeded()">事件

至於顯示結果，只管向funding對象的needed字段要就行了：ip

計算值：{{funding.needed}}

但是，還有一點小問題：如今，只有當input中的值發生變化的時候纔會觸發computeNeeded()方法，咱們但願在頁面加載的時候就執行computedNeeded方法。

爲此，AngularJS爲咱們準備了$scope.$watch(被觀察對象，執行的動做)，能夠把funding對象的startingEstimate字段列爲被觀察對象，startingEstimate字段的每次變化，都執行computedNeeded()這個動做，包括給startingEstimate字段初始賦值的時候。

$scope.$watch('funding.startingEstimate', $scope.computeNeeded);

完整代碼以下：

<!doctype html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <script src="angular.min.js"></script>
    <script>
        var myApp = angular.module("myApp",[]);
        
        myApp.controller("MyController",['$scope',function($scope){
            $scope.funding = {startingEstimate:0};
            
            $scope.computeNeeded = function(){
                $scope.funding.needed = $scope.funding.startingEstimate * 10;
            };
            
            $scope.$watch('funding.startingEstimate', $scope.computeNeeded);
            
            $scope.finish = function(){
                alert("done");
            };
        }]);
    </script>
</head>
<body ng-controller="MyController">
    <form ng-controller="MyController" ng-submit="finish()">
        初始值：<input type="text" ng-model="funding.startingEstimate" ng-change="computeNeeded()">
        計算值：{{funding.needed}}
        
        <input type="submit" value="提交"> 
    </form>
</body>
</html>

總結：

● 雙向綁定：ng-model
● 文本框值變化事件：ng-change
● 對某個對象實施觀察：$scope.$watch(被觀察對象，執行的動做)
● 表單提交：ng-submit
● 其它事件：ng-click, ng-dblclick

參考資料：<<用AngularJS開發下一代Web應用>>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。