如何用angularjs設置虛擬屬性？

我來自Rails背景，我正試圖使用AngularJS with Rails。我被困在一件非常簡單的事情上：一個人如何在Angularjs environment中構造出什麼軌道稱爲「虛擬屬性」？讓我舉個例子。如何用angularjs設置虛擬屬性？

我有一個名爲Medication的導軌模型，它有兩個屬性，劑量和數量。我想擁有一個可以返回劑量計數的「全部」虛擬屬性。這在Rails中是微不足道的，因爲它只是類Medication的一個實例方法。

那麼，那個地圖怎麼映射到AngularJS世界呢？說明：我在藥物（複數）上使用ng-repeat指令，對此我有MedicationsController。對於每個NG-重複循環，我得到一個「medication」對象，在這裏我想申請這個「實例方法」

total = function() { return dosage * count }

是如何編碼的？我在哪裏放置該功能？

來源

2012-11-28 explainer

這對於AngularJS來說非常簡單，因爲您可以在AngularJS視圖中使用任何JavaScript函數。所以只需在你的對象上定義一個函數（或者直接在一個範圍上）。例如，給這樣一個控制器：

var MedicationCtrl = function($scope) {  
    $scope.medication = { 
     dosage : 0.5, 
     count : 10, 
     total : function() { 
      return this.dosage * this.count; 
     } 
    }; 
}

你可以簡單的寫：

Total: {{medication.total()}}

這裏是一個的jsfiddle：http://jsfiddle.net/4r5g5/1/

然後，如果你有項目的集合，不想將任何邏輯放在對象級別上，可以在控制器上定義此方法，如下所示：

var MedicationCtrl = function($scope) {  
    $scope.total = function(medication) { 
     return medication.dosage * medication.count; 
    }; 
};

，並像如下方式使用此功能從標記：

<ul ng-repeat="m in medications" ng-controller="MedicationCtrl"> 
    <li>{{m.dosage}} + {{m.count}} = {{total(m)}}</li> 
</ul>

而且在的jsfiddle上面的代碼：http://jsfiddle.net/4r5g5/3/

來源

2012-11-28 19:56:51

我需要澄清一下：我使用藥物的NG-重複指令（複數）爲此我有一個MedicationsController。對於每個ng-repeat循環，我得到一個「藥物」對象，這就是我想要應用的函數total（） – explainer

更新了答案，但我並不十分清楚你正在嘗試做什麼。如果你可以用你的實際代碼發送一個jsFiddle會更容易。 –

好吧，明白了。非常感謝。試圖將Rails行爲映射到AngularJS上有其缺陷。我沒有意識到我需要一個「單一」的藥物控制器，以及一個「複數」藥物控制器，作爲一系列藥物「對象」。實際上沒有任何與Ruby實例方法等價的方法，它們更像是輔助方法。也許，按照慣例，我應該把我的新控制器稱爲'MedicationHelperController'。我還注意到ng-repeat指令中的item關鍵字不能是「藥物」，因爲如果是這樣的話，沒有任何工作。 – explainer

如何用angularjs設置虛擬屬性？

回答

相關問題