我有一个使用ng-repeat的转发器,它绑定到一组动态/运行时计算值。 (即,我的数组包含像Brokerage这样的字段:($ scope.BuyValue()+ $ scope.SellValue())* 0.5 / 100)。
当我更改具有ng-model的输入框中的值时,转发器内的字段Broker.Brokerage不会刷新。但我能够正确更新/绑定转发器外的字段。
<body ng-controller="BrokerController">
<div>
<div>
Buy Price <input type="textbox" ng-model="BuyPrice"/><br/>
Sell Price <input type="textbox" ng-model="SellPrice"/><br/>
Quantity <input type="textbox" ng-model="Quantity"/><br/>
Buy Value {{ BuyValue() }} <br/>
Sell Value {{ SellValue() }} <br/>
Profit {{ Profit() }} <br/><br/><br/>
<h4>Brokers</h4>
<div ng-repeat='Broker in Brokers'>
Broker Name : <b>{{Broker.BrokerName}}</b>
Brokerage Amount : <i>{{Broker.Brokerage}}</i> ({{Broker.BrokerageDetail}})
<br/>
</div>
</div>
</div>
<script id="angularjs" src="js/lib/angular/angular.js"></script>
<script>
var App = angular.module('ChooseYourBroker', []);
App.controller("BrokerController", ['$scope', function ($scope) {
$scope.BuyPrice = 10;
$scope.SellPrice = 20;
$scope.Quantity = 100;
$scope.BuyValue = function(){ return ( $scope.BuyPrice * $scope.Quantity )};
$scope.SellValue = function(){ return ( $scope.SellPrice * $scope.Quantity )};
$scope.Profit = function(){ return ( $scope.SellValue() - $scope.BuyValue() )};
$scope.Brokers = [
{
BrokerName: 'Broker one',
BrokerageDetail :'0.5% value of Sell Value',
Brokerage: $scope.SellValue() * 0.5/100
},
{
BrokerName: 'Broker two',
BrokerageDetail :'2% value of Sell Value',
Brokerage: $scope.SellValue() * 2/100
},
{
BrokerName: 'Broker three',
BrokerageDetail :'1% value of Sell Value',
Brokerage: $scope.SellValue() * 1/100
},
{
BrokerName: 'Broker Four',
BrokerageDetail :'0.5 % value of Buy Value and Sell Value',
Brokerage: ($scope.BuyValue() + $scope.SellValue())* 0.5/100
}];
}]);
</script>
答案 0 :(得分:4)
这是因为Brokerage
在运行时计算一次。由于您没有使用getter功能或没有运行观察程序,因此不会更新。您有两种选择:
JS:
{
BrokerName: 'Broker Four',
BrokerageDetail :'0.5 % value of Buy Value and Sell Value',
GetBrokerage: function () { return ($scope.BuyValue() + $scope.SellValue())* 0.5/100;}
}
HTML:
<span ng-bind="Broker.GetBrokerage()"></span>
BuyValue
和SellValue
,然后更新Brokers
。JS:
$scope.$watch("BuyValue()", function () { /*update all the brokers*/ });
$scope.$watch("SellValue()", function () { /*update all the brokers*/ });
答案 1 :(得分:3)
您需要在$watch
上设置SellValue()
,以便在返回值发生变化时收到通知:
$scope.$watch('SellValue()',function(newValue){
for(var i=0;i<$scope.Brokers.length;i++){
$scope.Brokers[i].Brokerage = ... * newValue; // Calculate the Brokerage
}
});
说明:视图可以通过范围绑定到模型值。 Brokers
对象不是视图元素,因此不绑定任何内容。当模型想要通知模型其他部分的更改时,需要$watch
。否则,您的Brokerage
属性仅在控制器的初始运行阶段计算一次。
Here is a fiddle我BrokerageRate
创建了SellValue()
,以便在Broker Four
更改时计算新的经纪人。
BuyValue()
需要更多工作,因为Brokerage
需要另外一个监视,因为{{1}}属性需要通知两个值的更改。
答案 2 :(得分:0)
因此angularJS ng-model不会更新基元。 如果你想让它自动更新,最好做一些像
这样的事情$scope.share={};
$scope.share.BuyPrice = 10;
$scope.share.SellPrice = 20;
$scope.share.Quantity = 100;
并更改
Buy Price <input type="textbox" ng-model="BuyPrice"/><br/>
Sell Price <input type="textbox" ng-model="SellPrice"/><br/>
Quantity <input type="textbox" ng-model="Quantity"/><br/>
到
Buy Price <input type="textbox" ng-model="share.BuyPrice"/><br/>
Sell Price <input type="textbox" ng-model="share.SellPrice"/><br/>
Quantity <input type="textbox" ng-model="share.Quantity"/><br/>
这样,共享的值将自动更新,而无需使用$ watch或setter和getter。但是它不会自动调用function(){return($ scope.SellValue() - $ scope.BuyValue())};再次
要做到这一点我会做
Buy Price <input type="textbox" ng-model="share.BuyPrice" ng-change="updatePrices()"/><br/>
Sell Price <input type="textbox" ng-model="share.SellPrice" ng-change="updatePrices()"/><br/>
Quantity <input type="textbox" ng-model="share.Quantity" ng-change="updatePrices()"/><br/>
和
$scope.updatePrices=function(){
$scope.share.BuyValue = function(){ return ( $scope.share.BuyPrice * $scope.share.Quantity )};
$scope.share.SellValue = function(){ return ( $scope.share.SellPrice * $scope.share.Quantity )};
$scope.share.Profit = function(){ return ( $scope.share.SellValue() - $scope.share.BuyValue() )};
}