Angularjs Data Binding Not Updating in Controller

Question

there is a problem that I couldn't understand. I copied my code below. The problem is when I clicked on a number it must update $scope.screen.operation but it is not updating it. Do I know data binding in a wrong way ?

(function() {
    var app = angular.module('electronApp', []);

    app.controller('MainCtrl', function ($scope) {

        $scope.numbers = {
            one: '',
            two: ''
        };

        $scope.operation = '';

        $scope.screen = {
            operation: $scope.numbers.one +' '+ $scope.operation +' '+ $scope.numbers.two,
            result: ''
        };

        $scope.number = function (number) {

            if($scope.operation == '') {
                $scope.numbers.one = '' + $scope.numbers.one + number;
            }

            console.log($scope.screen.operation);

        }

    });
})();

.screen{
    border: 1px solid #bbb;
    background-color: #fafafa;
    border-radius: 2px;
    height: 200px;
    margin-top: 15px;
    padding: 15px;
    position: relative;
}
.screen .operation-list{
    font-size: 16px;
    font-weight: bold;
}
.screen .result{
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    text-align: right;
}

.button-box{
    margin-top: 5px;
}
.button-box .row div{
    padding: 5px 5px;
}
.button-box .row div:first-child{
    padding-left: 0;
}
.button-box .row div:last-child{
    padding-right: 0;
}
.button-box .row div button{
    width: 100%;
    height: 40px;
    font-size: 16px;
    font-weight: bold;
    padding: 0;
}

<!DOCTYPE html>
<html ng-app="electronApp">
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  </head>
  <body>
  
	<div class="container-fluid" ng-controller="MainCtrl">
      <div class="screen col-xs-12">
          <div class="operation-list" ng-bind="screen.operation"></div>
          <div class="result">
              <span>{{screen.result}}</span>
          </div>
      </div>
      <div class="col-xs-12 button-box">
          <div class="row">
              <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(1)">1</button></div>
              <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(2)">2</button></div>
              <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(3)">3</button></div>
              <div class="col-xs-3"><button class="btn btn-default" button-type="operation">+</button></div>
          </div>
          <div class="row">
              <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(4)">4</button></div>
              <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(5)">5</button></div>
              <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(6)">6</button></div>
              <div class="col-xs-3"><button class="btn btn-default" button-type="operation">-</button></div>
          </div>
          <div class="row">
              <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(7)">7</button></div>
              <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(8)">8</button></div>
              <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(9)">9</button></div>
              <div class="col-xs-3"><button class="btn btn-default" button-type="operation">*</button></div>
          </div>
          <div class="row">
              <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(0)">0</button></div>
              <div class="col-xs-3"><button class="btn btn-default" button-type="clear">Tmzl</button></div>
              <div class="col-xs-3"><button class="btn btn-default" button-type="backspace">Sil</button></div>
              <div class="col-xs-3"><button class="btn btn-default" button-type="operation">/</button></div>
          </div>
      </div>
	</div>
	
  </body>

</html>

Peheje · Accepted Answer · 2016-08-09 19:35:14Z

2

$scope.screen.operation becomes a string which is not data bound.

Not entirely sure what we're trying to achieve but a possible solution could invole a function that returns the operation string you would want, and calling that:

$scope.makeOperation = function () {
  return $scope.numbers.one + ' ' + $scope.operation + ' ' + $scope.numbers.two;
}

...

$scope.number = function (number) {
  if ($scope.operation == '') {
     $scope.numbers.one = '' + $scope.numbers.one + number;
  }
  $scope.screen.operation = $scope.makeOperation();
  console.log($scope.screen.operation);
}

edited Aug 9, 2016 at 19:35

answered Aug 9, 2016 at 19:18

Peheje

14.4k1 gold badge25 silver badges31 bronze badges

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

3 Comments

Lex Over a year ago

You are correct, but perhaps you could offer a suggested solution instead of just pointing out the error?

Peheje Over a year ago

Added a possible solution. Hasn't been tested but something like that.

Aydın Bulut Over a year ago

Thanks for answer, you wrote a good solution and I got the point of my problem from answer of @Quiriacus.

κροκς · Accepted Answer · 2016-08-09 20:10:53Z

1

It looks like you expect $scope.screen.operation in

$scope.screen = {
    operation: $scope.numbers.one +' '+ $scope.operation +' '+ $scope.numbers.two,
    result: ''
};

to be automatically re-evaluated because a term on the right hand side of the assignment is updated.

AngularJS data binding does not work like that. $scope.screen.operation will get evaluated once (when the controller is initialized) based on the value the terms on the right hand side had at the time.

Then it's up to you to explicitly update $scope.screen.operation through the UI (two-way data binding) or through the controller's logic for example.

You can either explicitly update the $scope.screen.operation in your $scope.number function

or

Use $watch to detect changes on $scope.numbers.one (that change takes place in your $scope.number function at the moment.)

$scope.$watch('numbers.one', function(newVal, oldVal) {
    $scope.screen.operation = newVal + ' ' + $scope.operation + ' ' + $scope.numbers.two;
}

You'll probably want to do the same for $scope.numbers.two.

edited Aug 9, 2016 at 20:10

answered Aug 9, 2016 at 20:02

κροκς

5905 silver badges18 bronze badges

1 Comment

Aydın Bulut Over a year ago

Thanks for awnser, I got it the logic data binding in angular code side now thanks to you.

Collectives™ on Stack Overflow

Angularjs Data Binding Not Updating in Controller

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related