2種方式的數據綁定不起作用

我正在寫一個簡單的控制器，它的計算很少。這是一個真實項目的更多信息的反映。問題是，當作爲表達式放置在html上時，每次更改都會重新計算結果，但是，當我在$ scope中作爲變量進行計算時，結果不會更新。請參閱標記中的評論。2種方式的數據綁定不起作用

任何想法我在這裏失蹤？

標記

<body ng-app="myApp"> 
<div ng-controller="mainController"> 
    <h3> Numbers </h3> 
    <label> a </label> 
    <input type="number" ng-model="numbers.a"/> 

    <label> b </label> 
    <input type="number" ng-model="numbers.b"> 
<br> 
<br> 
    <span> Result : {{result}} {{numbers.a*numbers.b}} </span> // the first one does not update, but the second does. 

    <h3> Nums </h3> 

    <label> a </label> 
    <input type="number" ng-model="a1"> 

    <label> b</label> 
    <input type="number" ng-model="b1"> 

<br> 
    Result2: {{result2}} {{a1+b1}} 
<ul> 
    <li ng-repeat=" i in cool"> {{i}} </li> 
    </ul> 
    </div> 
</body>

的javascript：

angular.module('myApp',[]) 

.controller('mainController', ['$scope', function($scope) { 
    $scope.numbers = {a:11, b:10}; 
    $scope.a1 = 5; 
    $scope.b1 = 7; 
    $scope.result = $scope.numbers.a*$scope.numbers.b; 
    $scope.result2 = $scope.a1 +$scope.b1 ; 

    $scope.cool = [$scope.result + $scope.result2, 
       $scope.result - $scope.result2] 
}]);

http://codepen.io/Tallyb/pen/rVdebm

來源

2015-07-06 Tally Barak

結果在哪裏綁定結果？缺少ng-model =「結果」？ –

兩個選項可以添加更改偵聽器或http://codepen.io/anon/pen/dompRM – mido

控制器中的計算時，所述控制器被實例化僅執行時，通常當相應的視圖是顯示。你必須在封裝函數的計算（不需要$表）：

$scope.result = function() { 
    return $scope.numbers.a * $scope.numbers.b; 
} 
$scope.result2 = function() { 
    return $scope.a1 + $scope.b1; 
} 
$scope.cool = function() { 
    return [ 
    $scope.result() + $scope.result2(), 
    $scope.result() - $scope.result2() 
    ]; 
}

，並在您的視圖中引用它：

<span> Result : {{result()}} {{numbers.a*numbers.b}} </span>

和：

Result2: {{result2()}} {{a1+b1}}

和：

<li ng-repeat=" i in cool(result, result2)"> {{i}} </li>

參見：http://codepen.io/anon/pen/vORXpg

來源

2015-07-06 08:47:41

當數字發生變化時，您需要手錶重新計算結果的值。否則的result值只計算一次

var app = angular.module('my-app', [], function() {}) 
 

 
app.controller('mainController', ['$scope', 
 
    function($scope) { 
 
    $scope.numbers = { 
 
     a: 11, 
 
     b: 10 
 
    }; 
 
    $scope.a1 = 5; 
 
    $scope.b1 = 7; 
 

 
    //if a or b is changed recalculate result 
 
    $scope.$watch('[numbers.a, numbers.b]', function() { 
 
     $scope.result = $scope.numbers.a * $scope.numbers.b; 
 
     }) 
 
     //if a1 or b1 is changed recalculate result2 
 
    $scope.$watch('[a1, b1]', function() { 
 
     $scope.result2 = $scope.a1 + $scope.b1; 
 
    }) 
 

 
    //if result or result2 is changed recalculate cool 
 
    $scope.$watch('[result, result2]', function() { 
 
     $scope.cool = [$scope.result + $scope.result2, 
 
     $scope.result - $scope.result2 
 
     ] 
 
    }) 
 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="my-app"> 
 
    <div ng-controller="mainController"> 
 
    <h3> Numbers </h3> 
 
    <label>a</label> 
 
    <input type="number" ng-model="numbers.a" /> 
 

 
    <label>b</label> 
 
    <input type="number" ng-model="numbers.b" /> 
 
    <br/> 
 
    <br/> 
 
    <span> Result : {{result}} {{numbers.a*numbers.b}} </span> // the first one does not update, but the second does. 
 

 
    <h3> Nums </h3> 
 

 
    <label>a</label> 
 
    <input type="number" ng-model="a1" /> 
 

 
    <label>b</label> 
 
    <input type="number" ng-model="b1" /> 
 

 
    <br/>Result2: {{result2}} {{a1+b1}} 
 
    <ul> 
 
     <li ng-repeat=" i in cool">{{i}}</li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2015-07-06 08:48:01

第一個變量result不更新，因爲你的mainController功能只被計算一次 - 這是第一次角度解釋HTML和首先發現表達式ng-controller="mainController"。

爲了獲得result自動更新，你必須建立手錶聽衆控制器這樣的：

angular.module('myApp',[]) 

.controller('mainController', ['$scope', function($scope) { 
    // ... 
    $scope.$watch('[numbers.a, numbers.b]', function() { 
    $scope.result = $scope.numbers.a*$scope.numbers.b; 
    }); 

}]);

像{{numbers.a*numbers.b}}表達式會自動更新，因爲角度將設立手錶聽衆對於那些。事實上，html中的表達式語法僅僅是語法糖 - 在引擎蓋下，角度只會爲它在html中找到的每個表達式調用相同的函數$watch。

See the $watch documentation for more detail。

我個人更喜歡不使用上面提到的$watch語法，因爲它膨脹了控制器。或者，你可以從你的HTML調用一個函數：

{{ calculateResult() }}

在您的控制器，那麼您需要定義這樣的功能：

angular.module('myApp',[]) 

.controller('mainController', ['$scope', function($scope) { 
    // ... 
    $scope.calculateResult = function() { 
    return $scope.numbers.a*$scope.numbers.b; 
    }; 

}]);

旁註：如果你關心性能而你的calculateResult()函數真的很慢，你可能想要堅持到第一個版本。

來源

2015-07-06 08:50:22 riptidebyte

2種方式的數據綁定不起作用

回答

相關問題