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

Question

我来自一个Rails背景,我试图使用AngularJS with Rails.我坚持一个非常简单的事情:如何构建一个rails称为'虚拟属性'的东西Angularjs environment？让我举个例子.

我有一个名为Medication的rails模型,它有两个属性,剂量和计数.我希望有一个'总'虚拟属性,返回剂量*计数.这在Rails中是微不足道的,因为它只是类Medication的实例方法.

那么,这个地图如何映射到AngularJS世界？

澄清:我正在使用针对药物(复数)的ng-repeat指令,我有一个MedicationsController.对于每个ng-repeat循环,我得到一个' medication'对象,我想要应用这个'实例方法'

total = function() { return dosage * count }

怎么编码？我在哪里放这个功能？

Answer 1

使用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/