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

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:

Or like this:

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.