在Angular中間隔更新字段

我有一個跟蹤客戶的簡單應用程序：名稱（和/或id）和開始時間。它還顯示每個客戶的總時間，並根據客戶花費多少時間顯示賬單。在Angular中間隔更新字段

我最初寫了應用程序在香草JS，但我現在改寫它在Angular。我有麻煩想出一個更好的方式來更新視圖中的時間總量。以下是我目前所面對的：

型號：

$scope.addCustomer = function() { 
    // add current time 
    $scope.newCustomer.start = Date.now(); 
    // push the customer to container 
    $scope.customers.push(Customer.fromObj($scope.newCustomer)); 
}

景觀：

<tr ng-repeat="customer in customers" ng-click="customerDetails(customer)"> 
    <td ng-bind="customer.name"></td> 
    <td ng-bind="customer.id"></td> 
    <td>SHOW TIME HERE</td> 
    <td>SHOW MONEY HERE</td> 
</tr>

問題：
控制器的

.factory('Customer', function() { 
    function Customer(id, name, start, discount) { 
     this.name = name || ''; 
     this.id = id || null; 
     this.start = start || Date.now(); 
     this.discount = parseFloat(discount) || 0; 

     this.orders = []; 
    } 

    Customer.prototype.addOrder = function (order) { 
     this.orders.push(order); 
    }; 
    Customer.prototype.deleteOrder = function (order) { 
     var index = this.orders.indexOf(order); 
     if (index > -1) { 
      this.orders.splice(index, 1); 
     } 
     else { 
      console.log('Order deletion error - order not found.'); 
     } 
    }; 

    Customer.fromObj = function (obj) { 
     return new Customer(
      obj.id, 
      obj.name, 
      obj.start, 
      obj.discount) 
    }; 

    return Customer; 
})

部分最初，我每個客戶obj ECT有它自己的更新時間和金錢的價值觀，像這樣的時間間隔：

this.timeTotal = 0; 
this.moneyTotal = 0; 
this.timeInterval = setInterval(this.updateTime.bind(this), 1000); 
this.moneyInterval = setInterval(this.updateMoney.bind(this), 1000);

與功能來清除銷燬的間隔沿：

Customer.prototype.clearIntervals = function(){ 
    clearInterval(this.timeInterval); 
    clearInterval(this.moneyInterval); 
}

這樣一來，我可以<td ng-bind="customer.timeTotal">。 但我相信應該在視圖中進行時間/金錢追蹤（我錯了嗎？）。我迄今發現的例子似乎都使用$interval來討論更新單個值。

我琢磨了幾個可能的解決方案：

創建像<td track-time="customer">
一個指令都使用它某種功能在父控制器
使用舊的方式，其中每個對象都有間隔和屬性，存儲timeTotal
使用事件
也許還有其他？

我希望你能幫我選擇一個似乎更適合這種情況的決定，或者你可以建議一些我還沒有想到的其他方式。

注意，這一需求備份到存儲的字段只有name，id，start，discount，這也是爲什麼我不願意加入更多特性的Customer類的部分原因。

來源

2016-09-19 hlfrmn

更新視圖模型應該最好在控制器中完成。

如果您爲每個客戶指定一個指令（或者如果您使用的是角度爲1.5的組件），那麼他們都將擁有自己的範圍，您可以在其中處理間隔。

<div ng-repeat="customer in customers" ng-click="customerDetails(customer)"> 
    <customer customer-ref="customer"></customer> 
</div>

customerCtrl：

$interval(updateTime, 1000) 

function updateTime(){ 
    // $scope.time = $scope.customer.foo etc... 
}

您應該使用$區間，而不是setInterval的。

https://docs.angularjs.org/api/ng/service/ $區間

來源

2016-09-19 08:21:28 Amygdaloideum

在Angular中間隔更新字段

回答

相關問題