ng-changeでselectの変更を監視するには？

Question

選択した値が変更された場合、どのように合計を更新できますか？ http://jsfiddle.net/yx97x0xk/1

angular.module('app', ['QuickList']).controller('mainCtrl', function($scope) { 
    $scope.getSum = function() { 
    return $scope.myJson.map(function(x) { 
     return x.price * x.qty 
    }).reduce(function(a, b) { 
     return a + b 
    }); 
    } 

    $scope.myJson = [{ 
    "id": "1", 
    "name": "banana", 
    "price": 12, 
    "qty": 3, 
    }, { 
    "id": "2", 
    "name": "watermelon", 
    "price": 12.9, 
    "qty": 4, 
    }] 

}) 

Answer 1

selectタグにng-model="json.qty"を使用し、optionタグからng-selectedを削除してください。これはトリックを行います。 :-)

関数からの戻り値が変更された場合、Angularは自動的に関数（getSum）を実行します。

は、以下の作業を参照してください：

angular.module('app', []).controller('mainCtrl', function($scope) { 
 

 
    $scope.getSum = function() { 
 
    return $scope.myJson.map(function(x) { 
 
     return x.price * x.qty 
 
    }).reduce(function(a, b) { 
 
     return a + b 
 
    }); 
 
    }; 
 

 
    $scope.myJson = [{ 
 
    "id": "1", 
 
    "name": "banana", 
 
    "price": 12, 
 
    "qty": 3, 
 
    }, { 
 
    "id": "2", 
 
    "name": "watermelon", 
 
    "price": 12.9, 
 
    "qty": 4, 
 
    }] 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app='app' ng-controller='mainCtrl'> 
 
    <div ng-repeat="json in myJson"> 
 
    <li>{{json.name}}</li> 
 

 
    <select name="" id="" ng-model="json.qty"> 
 
     <option ng-repeat="i in [1,2,3,4,5,6,7,8,9,10]">{{$index + 1}}</option> 
 
    </select> 
 
    </div> 
 

 
    <h1>total:{{getSum()}}</h1> 
 
</div>

Answer 2

彼らは明らかに、同じではありません。 1つはコントローラーでのみ使用されます。もう1つは入力要素の指令です。

しかし、それらのアプリケーションでも違いがあります。

$ watchを使用すると、監視された式はダイジェストサイクルごとに評価され、変更があればハンドラが呼び出されます。

ng-changeでは、変更は特定の入力要素に対するユーザーアクションに制限されています。

ng-changeでは、ハンドラはイベントに応答して明示的に呼び出されます。

$ watchを使用すると、どこからでも変更を加えることができます。ユーザアクション、コントローラ機能、サービス - すべてがハンドラをトリガします。