how to setup virtual attributes with angularjs?

Question

I come from a Rails background and am attempting to use AngularJS with Rails. I am stuck on a very simple thing: how does one construct what rails calls 'virtual attributes' in an Angularjs environment? Let me give an example.

I have a rails model, called Medication, and it has two attributes, dosage and count. I want to have a 'total' virtual attribute that returns dosage * count. This is trivial in Rails, since it is just an instance method of class Medication.

So, how does that map into the AngularJS world?

Clarification: I am using an ng-repeat directive on Medications (plural) for which I have a MedicationsController. For each ng-repeat loop, I get a 'medication' object, where I want to apply this 'instance method'

total = function() { return dosage * count }

How is that coded? Where do I put the function?

pkozlowski.opensource · Accepted Answer · 2013-01-10 18:28:17Z

6

It is really simple with AngularJS as you can use any JavaScript function in AngularJS view. So just define a function on your object (or directly on a scope). For example, give a controller like this:

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

You can simply write:

Total: {{medication.total()}}

Here is a jsFiddle: http://jsfiddle.net/4r5g5/1/

Then, if you've got a collection of items and don't want to put any logic on an object level, you can define this method on a controller like so:

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

and use this function from a markup like follows:

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

And the above code in the jsFiddle: http://jsfiddle.net/4r5g5/3/

edited Jan 10, 2013 at 18:28

answered Nov 28, 2012 at 19:56

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

explainer Over a year ago

I need to clarify on this: I am using an ng-repeat directive on Medications (plural) for which I have a MedicationsController. For each ng-repeat loop, I get a 'medication' object, which is what I want to apply the function total()

pkozlowski.opensource Over a year ago

Updated the answer but I'm not really clear on what you are trying to do, exactly. It would be easier if you could send a jsFiddle with your actual code.

explainer Over a year ago

OK, got it. Thanks a lot. Trying to map Rails behavior onto AngularJS has its pitfalls. I didn't recognize that I needed a 'singular' controller for Medication as well as a 'plural' controller for Medications, as an array of Medication 'objects'. There really isn't any equivalent to a Ruby instance method, they are really more like helper methods. Maybe, by convention, I should call my new controller a 'MedicationHelperController'. I also noticed that the item keyword in the ng-repeat directive could not be 'medication', since nothing worked if that was the case.

Collectives™ on Stack Overflow

how to setup virtual attributes with angularjs?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related