javascript - 如何使用 angularjs 设置虚拟属性？

Question

我有 Rails 背景，并尝试将 AngularJS 与 Rails 结合使用。我陷入了一件非常简单的事情:如何在 Angularjs 环境中构造 Rails 所谓的“虚拟属性”？让我举个例子。

我有一个名为“药物”的 Rails 模型，它有两个属性:剂量和计数。我想要一个返回剂量 * 计数的“总计”虚拟属性。这在 Rails 中是微不足道的，因为它只是药物类的一个实例方法。

那么，它是如何映射到 AngularJS 世界的呢？

澄清:我在药物(复数)上使用 ng-repeat 指令，我有一个 MedicatesController。对于每个 ng-repeat 循环，我都会得到一个“medication”对象，我想在其中应用此“实例方法”

total = function() { return dosage * count }

这是如何编码的？我将该函数放在哪里？

Answer 1

使用 AngularJS 非常简单，因为您可以在 AngularJS View 中使用任何 JavaScript 函数。因此，只需在对象上(或直接在作用域上)定义一个函数即可。例如，给出一个像这样的 Controller :

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/

然后，如果您有一个项目集合并且不想在对象级别上放置任何逻辑，则可以在 Controller 上定义此方法，如下所示:

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/