AngularJS ng-repeat数据绑定中的问题
AngularJS Issue in ng-repeat data binding
场景
我有一个使用 ng-repeat 的中继器,它绑定到动态/运行时计算值的数组。(即,我的数组包含诸如经纪:($scope。买入价值(( + $scope.卖出价值(((* 0.5/100 (。
问题
当我更改具有 ng 模型的输入框中的值时,中继器内的字段 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>
这是因为Brokerage
在运行时计算一次。由于您没有对其进行 getter 函数或未运行观察程序,因此不会更新它。您有两种选择:
选项 1.制作一个吸气函数
.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>
选项 2.观看BuyValue
和SellValue
,并更新Brokers
。
.JS:
$scope.$watch("BuyValue()", function () { /*update all the brokers*/ });
$scope.$watch("SellValue()", function () { /*update all the brokers*/ });
您需要
在SellValue()
上设置$watch
,以便在返回值更改时收到通知:
$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
属性在控制器的初始运行阶段仅计算一次。
这是一个小提琴,我创建了一个BrokerageRate
,以便在SellValue()
发生变化时计算新的经纪业务。
Broker Four
需要更多的工作,因为需要BuyValue()
上再监视Brokerage
因为需要通知该属性两个值的更改。
小提琴
所以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或二传手和getter。但是它不会自动调用函数(({返回($scope。卖出价值(( - $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() )};
}
相关文章:
- 在VanillaJS中模拟模型双向数据绑定
- Telerik rad组合框多列数据绑定
- 数据绑定:'系统Char'不包含名为'xxxxx'
- OnsenUI AngularJS数据绑定无法正常工作
- Ionic-item在导航栏中进行双向数据绑定
- 基本D3.js:如何将具有其他属性的数据绑定到元素
- 使用自定义数据属性或将数据绑定到处理程序来处理事件
- ListView的ItemTemplate内的自定义HtmlControl的数据绑定失败
- $http中的Angular 1数据绑定承诺不起作用
- 在何处和何时添加具有数据绑定的元素
- 使用AngularJs数据绑定的三元运算符显示图像
- 为什么针对工厂的Angular数据绑定只适用于函数
- 挖空和显示模块模式的数据绑定问题
- 使用大括号的 Internet Explorer 上的 AngularJS 数据绑定问题
- angularjs数据绑定问题
- 淘汰数据绑定问题
- 数据绑定到文本区域和ng显示问题
- AngularJS ng-repeat数据绑定中的问题
- Windows商店js应用程序导航控件导致数据绑定问题
- AngularJS-文本区域中的数据绑定问题