2

设想

我有一个使用 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>

4

3 回答 3

4

这是因为Brokerage在运行时计算一次。由于您没有为其创建 getter 函数或没有运行观察程序，因此它不会被更新。你有两个选择：

选项 1. 制作一个 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>

选项 2. 观看BuyValue和SellValue更新Brokers。

JS：

$scope.$watch("BuyValue()", function () { /*update all the brokers*/ });
$scope.$watch("SellValue()", function () { /*update all the brokers*/ });
于 2013-06-14T16:57:40.937 回答
3

您需要设置一个$watchonSellValue()以便在返回值更改时收到通知：

$scope.$watch('SellValue()',function(newValue){
    for(var i=0;i<$scope.Brokers.length;i++){
        $scope.Brokers[i].Brokerage = ... * newValue; // Calculate the Brokerage
    }
});

说明：视图可以通过作用域绑定到模型值。该Brokers对象不是视图元素，因此不绑定到任何东西。$watch当模型想要在模型的其他部分发生更改时收到通知时，需要A。否则，您的Brokerage属性只会在控制器的初始运行阶段计算一次。

这是一个小提琴，我在其中创建了一个BrokerageRate用于在任何更改时计算新的 Brokerage SellValue()。

Broker Four将需要更多的工作，因为需要通知BuyValue()该Brokerage属性两个值的更改，因此需要另一个监视。

fiddle

于 2013-06-14T16:49:48.680 回答
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/>

这样，share 的值将自动更新，而无需使用 $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() )};
}
于 2014-07-18T01:03:30.157 回答