角型双方向データバインディング

Question

私は何かが足りないと思われるので、私はここでこの質問をしています。私はdatabind 2項目はちょうど良いことができます。私は、たとえばnumber/2のような結果の計算を実行することさえできます。

私が抱えている問題は、結果がリアルタイムで変わることです。いくつかのコード：

var app = angular.module('base_app', []); 

    app.controller('testCtrl', ['$scope', function($scope){ 

    $scope.percentage = 50; 

    $scope.total = $scope.percentage/2; 
    }]); 

とHTMLコンテンツは：

<div class="col-sm-12" ng-controller="testCtrl"> 
     <input type="text" ng-model="percentage" /> 
     <p>{{percentage}}</p> 
    </div> 

    <div class="col-sm-12" ng-controller="testCtrl"> 
    <p>{{total}}</p> 
    </div> 

だから私はやって探しています何を、$ scope.percentageは2ウェイのデータバインドを介して更新されたときに、私は$スコープをしたいです。更新する合計も同様です。

パーセンテージが50の場合、合計は25になります。入力を20に変更した場合、合計は10に更新する必要がありますが、これは正しくありません。

Answer 1

あなたは、コントローラでNG-変更に

<div class="col-sm-12" ng-controller="testCtrl"> 
     <input type="text" ng-change="Update()" ng-model="percentage" /> 
     <p>{{percentage}}</p> 
    </div> 

こと

$scope.Update = function(){ 
    $scope.total = $scope.percentage/2; 
} 

DEMO

Answer 2

を行う必要があり、私はあなたがそれに親divタグとintializeコントローラを入れて持っていると思いますdiv。

例：

<div ng-controller="testCtrl"> 
    <div class="col-sm-12"> 
     <input type="text" ng-model="percentage" ng-change="updateTotal()"/> 
     <p>{{percentage}}</p> 
    </div> 

    <div class="col-sm-12"> 
    <p>{{total}}</p> 
    </div> 
</div> 

とupdateTotal（）コントローラに機能を追加

$scope.updateTotal = function(){ 
    $scope.total = $scope.percentage/2; 
}