Angular.js - elegant way to use functions in scope

Question

I'm planning on running a variety calculations throughout my app to display different messages/classes, I'm unsure what is the most elegant/best practice way to do this in Angular.

Below is a simple example of what I'm trying to achieve, though my plan is to create more complex expressions that don't make sense to me to keep in the markup.

<li ng-repeat="goal in goals"> 
<strong ng-show="((goal.count / goal.goalNumber) * 100) == 0"> Get to work</strong>
<strong ng-show="((goal.count / goal.goalNumber) * 100) == 50"> Half way there!</strong>
<strong ng-show="((goal.count / goal.goalNumber) * 100) == 100"> Success!!</strong>
</li>

Could someone recommend a more modular/reusable method to do this? I imagine one method is to create a function that I can use throughout the template? But how do I get each "goal" iteration's goal.count and goal.goalNumber in that function? And would this be something I call from my controller, or would a directive be a better place to store this?

Many thanks.

Answer 1

Markup

<li ng-repeat="goal in goals"> 
<strong ng-show="zeroGoals($index)"> Get to work</strong>
<strong ng-show="fiftyGoals($index)"> Half way there!</strong>
<strong ng-show="oneHundredGoals($index)"> Success!!</strong>
</li>

Js

$scope.zeroGoals = function(index){
       return (($scope.goals[index].count / $scope.goals[index].goalNumber) * 100) == 0;
};

$scope.fiftyGoals = function(index){
       return (($scope.goals[index].count / $scope.goals[index].goalNumber) * 100) == 50;
};

$scope.oneHundredGoals = function(index){
       return (($scope.goals[index].count / $scope.goals[index].goalNumber) * 100) == 100;
};

Answer 2

Attach a controller to the element on which the ng-repeat is. This controller will have access to the loop variable. Example :

View

<div ng-app="app" ng-controller="Controller">
    <div ng-repeat="item in items" ng-controller="RepeatController">
        {{item}}: {{doubleItem()}}
    </div>
</div>

Controllers

angular.module('app', [])
.controller('Controller', function ($scope) {
    $scope.items = [1, 2, 3, 4];

})
.controller('RepeatController', function ($scope) {  
    $scope.doubleItem = function () { 
        return $scope.item * 2; 
    };
})

Answer 3

A bit of improvement...

HTML

<li ng-repeat="goal in goals">  
    <strong ng-show="geq(goal, 0)"> Get to work</strong>
    <strong ng-show="geq(goal, 50)"> Half way there!</strong>
    <strong ng-show="geq(goal, 100)"> Success!!</strong>
</li>

JS

$scope.geq = function(g, n){
   return ((100 * g.count / g.goalNumber ) === n);
};

Answer 4

Use a filter in the view like this:

 <strong ng-if="'goal.count ¦ isGoal : goal.goalNumber : 50">

and the filter:

 app.filters('isGoal', function() {

     return function(count, goalNumber, reached) {
         return (count / goalNumber) == reached;
     }

 });