CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Rodrigo Graça
Rodrigo Graça

Reputation: 2175

Variable is not updating after changing the input

My controller:

.controller('ExampleController', ['$scope', function($scope) {
    $scope.barcode = 111;
    $scope.scanBarcode = function() {
        $scope.barcode = 123123123;
    };

    $scope.scanThis = function() {
        $scope.barcode = 456456456;
    };
}])

My view:

<form>
    <div class="list list-inset">
        <label class="item item-input">
            <input type="number" placeholder="Code?" ng-model="barcode">
        </label>
        {{barcode}}
    </div>
    <button class="button button-positive button-block" ng-click="scanBarcode()">Scan!</button>
    <button class="button button-positive button-block" ng-click="scanThis()">Scan this!</button>
</form>

Is as simple as one input and two buttons to set the "barcode" var value. It works when I load the view, I can click the buttons and the value changes, but as soon as I change the input value the functions stop working....

EDIT 1: No, I did not forgot to "link" the view to the controller, I have the following code:

.state('tab.dash', {
      url: '/dash',
      views: {
        'tab-dash': {
          templateUrl: 'templates/tab-dash.html',
          controller: 'ExampleController'
        }
      }
    })

EDIT 2: If i use:

<form ng-controller="ExampleController">

It works, as well as if I use "$parent" like this:

<input type="number" placeholder="Code?" ng-model="$parent.barcode">

This means that using the "state" is not working as I expected... It's creating a "local" scope for the input when is modified...

Upvotes: 0

Views: 87

Answers (2)

John Bledsoe
John Bledsoe

Reputation: 17682

I believe that your problem is related to not having a dot in your ng-model. I can't be 100% sure without a Plunkr to demonstrate the issue, but if I were troubleshooting the problem this would be the first place I would look.

As an aside, the dot in scope problem is why I prefer using the vm variable and "controller as" syntax recommended by John Papa.

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85593

You forgot to add ng-controller directive.

<form ng-controller="ExampleController">
    <div class="list list-inset">
        <label class="item item-input">
            <input type="number" placeholder="Code?" ng-model="barcode">
        </label>
        {{barcode}}
    </div>
    <button class="button button-positive button-block" ng-click="scanBarcode()">Scan!</button>
    <button class="button button-positive button-block" ng-click="scanThis()">Scan this!</button>
</form>

Upvotes: 2

Related Questions