我尝试使用 $watch 来获取在
中输入的数据<input type="text" ng-show="expense.done" ng-model="spentamount" size="30"
placeholder="Enter the amount">
JavaScript:
$scope.spentAmount = function() {
angular.forEach($scope.expenses, function(expense) {
if(expense.done){
$scope.$watch('spentamount',function () {
console.log($scope.spentamount);
});
}
});
//return amount;
};
HTML:
<label for="spentby">Spent by</label>
<ul class="unstyled">
<li ng-repeat="expense in expenses">
<input type="checkbox" ng-model="expense.done">
<span>{{expense.text}}</span>
<input type="text" ng-show="expense.done" ng-model="spentamount" size="30"
placeholder="Enter the amount"><span>{{addExpenseAmount()}}</span>
</li>
</ul>
<form ng-submit="addExpense()">
<input type="text" ng-model="expenseText" size="30"
placeholder="Enter the names">
<input class="btn-primary" type="submit" value="Add">
</form><br>
<label for="amountspent">Amount spent(Rs)</label>
<span>{{spentAmount()}}</span><br>
但是console.log($scope.spentamount)
说“未定义”
我对 $watch 的使用正确吗?
请指教
最佳答案
您的 Controller 无法监视“spentamount”变量,因为它未在 Controller 范围内定义,而是在 ng-repeat 迭代范围内定义。
参见:
<li ng-repeat="expense in expenses">
<input type="checkbox" ng-model="expense.done">
<span>{{expense.text}}</span>
<input type="text" ng-show="expense.done" ng-model="spentamount" size="30"
placeholder="Enter the amount"><span>{{addExpenseAmount()}}</span>
</li>
这意味着当您在输入中键入某些内容时,花费金额会在内部范围内更新:
$scope of your controller
-> First ng-repeat iteration create a new scope
-> New 'expense' and 'spentamout' variables are defined here
-> Second ng-repeat iteration create a new scope
-> New 'expense' and 'spentamout' are defined here
您可以做的是在花费更新时应用更改事件:
<li ng-repeat="expense in expenses">
<input type="checkbox" ng-model="expense.done">
<span>{{expense.text}}</span>
<input type="text" size="30" placeholder="Enter the amount"
ng-show="expense.done"
ng-model="spentamount"
ng-change="onAmountUpdated(spentamount, expense)">
<span>{{addExpenseAmount()}}</span>
</li>
在你的 Controller 中:
$scope.onAmountUpdated = function(spentamount, expense) {
console.log(spentamount, expense);
};
看到这个 fiddle :http://jsfiddle.net/Pa633
关于javascript - Angular js-model 中的 $watch 无法在 Controller 中访问,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20854534/