0

Given an array of “visits” [{ date:DATE, summary:TEXT }, { date:DATE, summary:TEXT }, …] , if I need to show the last visit, where would I do the calculation:

  1. In the controller and add the calculated value to the $scope - <div>{{lastVisit}}</div>
  2. Using a $scope method - <div>{{getLastVisit()}}</div>
  3. In the view (this definitely doesn’t feel right) - <div>{{visits[visits.length-1]}}</div>

I am avoiding for now the question whether the model should be manipulated inside the controller or in its own service.

Improve this question
1
  • is visits being maintained within the controller? Commented Feb 27, 2014 at 16:59

3 Answers 3

Reset to default
1

With option 1, you'd have to add a watch to update the lastVisit in model any time the visits array changes. Option 2 is better but requires writing an additional one-liner function in your model.

The third option is legit and require zero javascript so if you only need to simply show the last element of the array this is the way to go. It's also the most efficient as it doesn't require any additional objects in memory, and doesn't call any other function (than angular parse internally)

If you don't want the logic in your view, Option 2 is your best choice. But I would create a more generic method that returns the last element of the array like that:

<div>{{getLastItem(visits)}}</div>

$scope.getLastItem = function(arr){
    return arr[arr.length - 1];
};

See fiddle: http://jsfiddle.net/hZM23/1/

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

2 Comments

if lastVisit is a property of $scope, there would be no need to add a watch. $scope.lastVisit = latestVisitValue; will update the view thru angular's data binding.
(1) I like this answer because it points out how lastVisit might change and how 3rd option is legit since its most efficient; (2) I think another succinct and efficient method (assuming lodash is included anyway) is <div>_.last(visits)</div>
0

My personal preference on the above approaches:

  1. Yes, the best approach, since you don't have your business logic in your view.
  2. This will have the same effect as the 1st option, but accessing Model from view comes under best practices.
  3. No, since your business logic might change in future.
Improve this answer

Comments

0

Option 1: Doing calculations in the controller and storing the value to $scope. When that value is updated, angular will automatically update your view. This is likely what you want.

To clarify: In your controller, when the visits array is updated ( element added, deleted, etc... ), calculate the last visit value and store it to $scope.lastVisit.

var function newVisit( visit ){
  visits.append( visit );
  $scope.lastVisit = visit; // this will update your view
}

Why I don't think option 2 is right: Angular will be binding the function and not the value itself. Binding to the value itself is likely what you mean.

You are correct about 3, keep logic out of the view if possible.

Improve this answer

2 Comments

But with option 1, you have to add a watch to update the lastVisit in model any time the visits array changes. And you are wrong about option 2. Angular will reevaluate the function on every $digest cycle.
I think the question is asking about binding the most recent element in the array to the view, not the whole array itself. I edited my response to reflect that assumption. I don't like putting logic in the view, since that is what the controller is there for.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.