New to Angular - Computed Variables

Question

I am moving to Angular from Knockout, and I have a few issues. I\'m assuming that I must be doing something a non-angular type of way.

http://jsfiddle.net/LostInDaJungle

Answer 1

I'm new to AngularJS but I think that $parse could be used:

http://docs.angularjs.org/api/ng/service/$parse

This is interesting if you have the expression as a string. You can use a path of properties and that string can be generated dynamically. This works if you don't know the expression at compile time, a lot like eval() but probably a lot faster and maybe more secure(?).

Here's an example:

function Ctrl($scope,$parse) {
  var expression = 'model.val1 + model.val2';//could be dynamically created
  $scope.model = {
    val1: 0,
    val2: 0,
    total: function() { 
        return ($parse(expression))($scope); 
    }
  };
}

Answer 2

About problem 1:

You should use input type="number" if possible. That would take care of parsing numbers properly. Even if you have an older browser angular would take care of formatting them as numbers.

About problem 2:

Your answer is good Jason if you just need to show plain text on the screen. However if you would like to bind an input with a model to an arbitrary expression, you need something else.

I wrote a directive you can use to bind an ng-model to any expression you want. Whenever the expression changes the model is set to the new value.

module.directive('boundModel', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      scope.$watch(attrs.boundModel, function(newValue, oldValue) {
        if(newValue != oldValue) {
          ngModel.$setViewValue(newValue);
          ngModel.$render();
        }
      });
    }
  };
})

You can use it in your templates like this:

<input type="text" ng-model="total" bound-model="value1 + value2">

Or like this:

<input type="text" ng-model="total" bound-model="cost()">

Where cost() is a simple function of the scope like this:

$scope.cost = function() { return $scope.val1 + $scope.val2 };

The good thing is that you keep using a model for your input and you don't have to dinamically update your value attribute, which doesn't work well in angular.

Answer 3

I changed your third input to:

<input type="text" value="{{val1 * 1 + val2}}" />

which causes Angular.js to treat the values as numbers, not strings.

Here is the fiddle. I gleaned the answer from here.

Answer 4

For a calculated field, add a method to your controller . . .

$scope.cost = function() { return $scope.val1 + $scope.val2 };

and then bind to it directly. It will know when it needs to recalculate as its constituent values change.

<div>{{cost()}}</div>

Answer 5

u can bind to a function

function CTRL ($scope) {
$scope.val1 = 3;
$scope.val2 = 4;
$scope.sum = function(){
   return ($scope.val1 *1 + $scope.val2 *1);
};

}

it will work the same the binding expression will work but in much more complex cases we need functions

Answer 6

The $watch function that is made available through the $scope variable is best for this job in my opinion.

$scope.$watch(function(scope) { return scope.data.myVar },
              function(newValue, oldValue) {
                  document.getElementById("myElement").innerHTML =
                      "" + newValue + "";
              }
             );

The $watch function takes in a: value function & a listener function

The above example is taken from this awesome article: http://tutorials.jenkov.com/angularjs/watch-digest-apply.html

After reading through it, I learnt a lot and was able to implement the solution I was looking for.