Angular.js binding one property to another

Question

As a contrived example, let's say I have an angular controller that looks something like this:

function OverflowController($scope) {

  // initialize the count variable
  $scope.count = 0;

  // pretend the overflow logic is complex and doesn't belong in a filter or view
  var count = parseInt($scope.count);

  if (count < 100) {
    $scope.overflow = "normal";
  }
  else if (count < 200) {
    $scope.overflow = "warning";
  }
  else {
    $scope.overflow = "error";
  }

};

and I have a view that looks like this:

<input ng-model="count">
<p>Count: {{count}}</p>
<p>Overflow? {{overflow}}</p>

How can I bind the overflow property of the scope to the count property in such a way that when the count is updated, the overflow automatically gets updated too?

Karen Zilles · Accepted Answer · 2013-07-12 20:42:30Z

4

Use $watch: (http://docs.angularjs.org/api/ng.$rootScope.Scope#$watch)

function OverflowController($scope) {

  // initialize the count variable
  $scope.count = 0;

  $scope.$watch('count', function (count) {
     // pretend the overflow logic is complex and doesn't belong in a filter or view

     if (count < 100) {
       $scope.overflow = "normal";
     }
     else if (count < 200) {
       $scope.overflow = "warning";
     }
     else {
       $scope.overflow = "error";
     }
   });
};

edited Jul 12, 2013 at 20:42

answered Jul 12, 2013 at 20:37

Karen Zilles

7,6713 gold badges37 silver badges34 bronze badges

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

2 Comments

LandonSchropp Over a year ago

Is the view automatically updated? How does Angular know the function passed to $watch has updated the overflow property?

Karen Zilles Over a year ago

view is updated automatically. After a watch function runs angular does a digest which checks all of your template values for changes.

Terry · Accepted Answer · 2013-07-12 20:38:25Z

0

A simple way would be to watch it for changes:

  $scope.$watch('count', function(newVal, oldVal) {
    if (!angular.equals(newVal, oldVal)) {
       updateCount();
    }
  });

  function updateCount() {
    var count = parseInt($scope.count);

    if (count < 100) {
      $scope.overflow = "normal";
    }
    else if (count < 200) {
      $scope.overflow = "warning";
    }
    else {
      $scope.overflow = "error";
    }
  }

answered Jul 12, 2013 at 20:38

Terry

14.2k9 gold badges58 silver badges84 bronze badges

Comments

alfrescian · Accepted Answer · 2013-07-12 20:46:02Z

0

just use getOverflow as $scope function:

<div ng-controller="OverflowController">
<input ng-model="count" />
<p>Count: {{count}}</p>
<p>Overflow? {{getOverflow()}}</p>

angular.module('myApp', [])
    .controller("OverflowController", function ($scope) {
    // initialize the count variable
    $scope.count = 0;   
    $scope.getOverflow = function () {
         var count = parseInt($scope.count);
        var overflow = "error";
        if (count < 100) {
           overflow = "normal";
        } else if (count < 200) {
            overflow = "warning";
        }
        return overflow;
    }
});

JSFiddle: http://jsfiddle.net/alfrescian/Gt9QE/

answered Jul 12, 2013 at 20:46

alfrescian

4,0791 gold badge20 silver badges20 bronze badges

3 Comments

Karen Zilles Over a year ago

The only issue with doing it this way is that your getOverflow function will be run everytime angular does a digest, which is often. Using a $watch means it will only be run when count changes.

alfrescian Over a year ago

yub, but you doesn't have to add a 2nd watch if an additional property has to be considered to calculate overflow

Karen Zilles Over a year ago

You can just add the property to the same watch. Check out my answer on this question: stackoverflow.com/questions/11952579/…

Collectives™ on Stack Overflow

Angular.js binding one property to another

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related