CODEWITHSUNDEEP
javascriptangularjs
Abel Abad
Abel Abad

Reputation: 145

Angular ng-model not updating after typing into number input

So basically I'm creating a simple app with two controllers. ControllerA button increments ControllerB number input and vicer versa.

The problem is that $scope.total is not updating after typing into number input manually, and I don't know what would be the best way to achieve this.

HTML

<div ng-app="tabsApp">

    <div id="tabOne" class="tabcontent">
          <div ng-controller="tabOneController as vm">
          <input type="button" value="increment value in tab 2" ng-click="vm.sumar()"/>
          <input type="number" ng-model="vm.totalB.value">
          </div>
    </div>


    <div id="tabTwo" class="tabcontent">
        <div ng-controller="tabTwoController as vm">
        <input type="button" value="increment value in tab 1" ng-click="vm.sumar()"/>
        <input type="number" ng-model="vm.total.value">
        </div>
    </div>

</div>

JS

  var app = angular.module('tabsApp', []);
  app.controller("tabOneController", controllerA);
  app.controller("tabTwoController", controllerB);
  app.service('myData', function() {

      var data = {
        value: 0
      }, dataB = {
        value: 0
      }; 

      this.addItem = function (value) {
        data.value = value;
      }

      this.getItem = function() {
        return data;
      }

      this.addItemB = function (value) {
        dataB.value = value;
      }

      this.getItemB = function() {
        return dataB;
      }

    });



    function controllerA(myData){

      var scope = this;
      scope.total = 0;

      scope.sumar = function(){
        scope.total++;
        myData.addItem(scope.total);
      }

      scope.totalB = myData.getItemB();
    }

    function controllerB(myData){

      var scope = this;
      scope.totalB = 0;

      scope.sumar = function(){
        scope.totalB = myData
        scope.totalB++;
        myData.addItemB(scope.totalB);
      }

      scope.total = myData.getItem();

    }

Upvotes: 1

Views: 569

Answers (4)

Tom Shen
Tom Shen

Reputation: 1045

Here's a working example based on your code : Plunker

function controllerA(myData){

  var scope = this;
  scope.total = 0;

  scope.sumar = function(){
    scope.total = myData.getItem().value;  // added this line
    scope.total++;
    myData.addItem(scope.total);
  }

  scope.totalB = myData.getItemB();
}

function controllerB(myData){

  var scope = this;
  scope.totalB = 0;

  scope.sumar = function(){
    scope.totalB = myData.getItemB().value;  // modified this line
    scope.totalB++;
    myData.addItemB(scope.totalB);
  }

  scope.total = myData.getItem();

}

Upvotes: 2

Aron
Aron

Reputation: 9246

Would something like this help:

HTML

<div ng-app="tabsApp" ng-controller="tabController as vm">

    <div id="tabOne" class="tabcontent">
        <div>
            <input type="button" ng-click="vm.one++" />
            <input type="number" ng-model="vm.two">
        </div>
    </div>


    <div id="tabTwo" class="tabcontent">
        <div>
            <input type="button" ng-click="vm.two++" />
            <input type="number" ng-model="vm.one">
        </div>
    </div>

    <p>Total (method 1): {{vm.one + vm.two}}</p>
    <p>Total (method 2): {{ total(vm.one, vm.two) }}</p>

</div>

JS

 var app = angular.module('tabsApp', []);
 app.controller("tabController", function() {
     this.one = 0;
     this.two = 0;

     this.total = function(one, two) {
         return one + two;
     }
 })

Unless you have a specific need for two controllers and a service I would just put this all in one controller. At the moment what you have is massive overkill.

Upvotes: 0

nagrom97
nagrom97

Reputation: 514

You could try implementing required ng-change="controller.functionThatIncrementsValues" in your html.

Upvotes: 0

Anmol Mittal
Anmol Mittal

Reputation: 853

 scope.totalB = myData.getItemB(); // first controller

 scope.total = myData.getItem(); // second controller

These will be called just once when controller is loaded. Place them inside the function sumar

Use vm.total and vm.totalB instead of vm.total.value and vm.totalB.value in html

Upvotes: 0

Related Questions