How to connect one model variable to mutiple html elements using angularjs data binding?

Question

I'm trying to write some application using ng-repeat and limitTo, but it seems that the input field and the buttons can't work together on the same model value.
The problem is that once I changed the value from the input field, the buttons won't work any more. could you tell me why?

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
    $scope.test = 3;
    $scope.dPlus = function(){
       $scope.test++;
    }
    $scope.dMinus = function(){
       $scope.test--;
    }
    
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="namesCtrl">

<div ng-if='true'>

<p>Type a number in the input field:</p>

<p><input type="number" ng-model="test"></p>
<input type="button" value="+" ng-click="dPlus()"/>
<input type="button" value="-" ng-click="dMinus()"/>
<div>{{ test }}</div>

<ul>
  <li ng-repeat="x in names | limitTo:test">
    {{ x }}
  </li>
</ul>

</div>


</body>
</html>

Olezt · Accepted Answer · 2017-06-05 12:35:15Z

You should use controller as syntax and it works.

If the model is a primitive, the child scope will just create a new model. But if the change is to a property of a model object, the lookup on parent scopes will find the referenced object and change its actual property. Common Mistake #2: Not Having a Dot In There

Here is the working code:

angular.module('myApp', []).controller('namesCtrl', function() {

var vm = this;
    
vm.names = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
    vm.test = 3;


    vm.dPlus = function(){
       vm.test++;
    }
    vm.dMinus = function(){
       vm.test--;
    }
    
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="namesCtrl as vm">

<div ng-if='true'>

<p>Type a number in the input field:</p>

<p><input type="number" ng-model="vm.test"></p>
<input type="button" value="+" ng-click="vm.dPlus()"/>
<input type="button" value="-" ng-click="vm.dMinus()"/>
<div>{{ vm.test }}</div>

<ul>
  <li ng-repeat="x in vm.names | limitTo:vm.test">
    {{ x }}
  </li>
</ul>

</div>

<p>The list will only consists of names matching the filter.</p>

</body>
</html>

Danila Shutov · Accepted Answer · 2017-06-05 09:30:21Z

1

It's because you bind value directly in ng-model. Put it in some object and it will work just fine. Like this:

<input type="number" ng-model="vm.counter">

https://www.toptal.com/angular-js/top-18-most-common-angularjs-developer-mistakes

Mistake #2 :)

answered Jun 5, 2017 at 9:30

Danila Shutov

5022 silver badges12 bronze badges

3 Comments

Yichong Over a year ago

It is exactly what I want, Thanks ! : )

Danila Shutov Over a year ago

But remember that @Olezt is actually right! Stick to using "controller as" syntax, since it helps in many ways. Most obvious one is the possibility to use ES6 classes smoothly for your controllers, and use inheritance for them. Isn't that neat?

Yichong Over a year ago

Yeah, "controller as" syntax is a better solution as Common Mistake #3: Not Using controllerAs Syntax & Common Mistake #4: Not Fully Utilising The controllerAs Syntax specified.

Collectives™ on Stack Overflow

How to connect one model variable to mutiple html elements using angularjs data binding?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related