Mar*_*arc 1 javascript angularjs
我是AngularJS的新手.我正在尝试在特定值更改时更新元素,但是当值通过JS更改时,不会触发更改; 它们仅在输入框中手动输入/模糊值时发生.
我从Angular Dev Guide分支的简单示例如下: *http://jsfiddle.net/3R5wn/*
<!-- Angular HTML -->
<div ng-app="">
<div ng-controller="InvoiceCntl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required id="myqty"></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}
</div>
</div>
<button onclick="document.getElementById('myqty').value=document.getElementById('myqty').value*1+1;">Increment Qty</button>
角度控制器JS:
//Angular Controller JS
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
}
请注意,当用户手动(通过键盘)更改数量/价格框中的值时,将更新总计.但是,当用户单击"增量"按钮时,总数不会更新.
在我的简单例子中,有人能解释如何克服这个问题吗？我想避免过于讨厌的事情,那么处理这种情况是否有最好的做法？
笔记:
大编辑
这是我正在使用的实际代码(对不起,一个封闭的网络问题阻止我首先发布):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html ng-app="">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/excite-bike/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
<script>
//inline JS here
$(function() {
var spinner = $( "#qtySpinner" ).spinner({
spin: function( event, ui ) {
qty++;
}
});
});
</script>
<title>Angular Testing</title>
</head>
<body>
<div ng-controller="InvoiceCntl">
<b>Invoice:</b><br>
<br>
<table>
<tr>
<td>
Quantity
</td>
<td>
Cost
</td>
</tr>
<tr>
<td>
<input id="qtySpinner" type="integer" min="0" ng-model="qty" required="" ng-change="calculate(qty,cost);">
</td>
<td>
<input type="number" ng-model="cost" required="">
</td>
</tr>
</table>
<hr>
<b>Total:</b> {{calculate(qty,cost)}}
</div>
<br>
<b>Dummy Experimental Buttons</b>
<br>
<button onclick="alert($('#qtySpinner').val());$('#qtySpinner').val(10);">Set 10</button>
<button ng-click="qty++">Inc</button>
</body>
</html>
Javscript在这里:
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
$scope.calculate = function calculate(xval, yval) {
return xval * yval;
};
}
构建Angular,以便您不必与DOM交互.相反,只需将计算 - 作为简单的JavaScript - 放在ng-click属性中:
<button ng-click="qty++">Increment Qty</button>
或者,您可以在您的方法上放置一个方法$scope,然后您可以从内部调用ng-click:
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
$scope.increment = function () {
$scope.qty++;
};
}
然后,在您的视图中,只需调用该函数:
<button ng-click="increment()">Increment Qty</button>
更新:要从角度摘要周期之外更新范围,您必须首先获得对范围的引用,进行更改,然后手动调用$digest,以便更新视图:
var scope = angular.element('#qtySpinner').scope();
scope.qty++;
scope.$digest();
| 归档时间： |
|
| 查看次数： |
3652 次 |
| 最近记录： |