CODEWITHSUNDEEP
htmlangularjsinputbox
Celia
Celia

Reputation: 39

Angularjs Parse value from input box to controller

I have an input box of quantity that the user can change it's value by clicking the - and + buttons. The problem is that if I entre the value directly in the input box I can parse this value to my controller. If I change the value by clicking the buttons + or - I can not parse the value to controller, it keeps always the old value. Can anyone help me?

<button
    onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 0 ) result.value--;return false;"
    class="reduced items-count"
    type="button"
>
    <i class="fa fa-minus">&nbsp;</i>
</button>
<input
    type="text"
    class="input-text qty"
    title="Qty"
    maxlength="12"
    id="qty"
    name="qty"
    ng-init="qty='1'"
    ng-model="qty"
>
<button
    onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;"
    class="increase items-count"
    type="button"
>
    <i class="fa fa-plus">&nbsp;</i>
</button>

And my controller,

$scope.$watch('qty', function (val) {
    if (val) {
        alert("qty2:" + val);
    }
});

Upvotes: 0

Views: 824

Answers (2)

charlietfl
charlietfl

Reputation: 171679

This is totally the wrong approach... never use dom methods in angular app like that.

Use ng-click to modify the ng-model property. Also always follow the golden rule of making sure you have a dot in ng-model

angular
  .module('app', [])
  .controller('Ctrl', function($scope) {
  
    $scope.data = {
      qty: 0
    }

    $scope.updateQty = function(amt) {
      $scope.data.qty += amt
    }

  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <button ng-click="updateQty(-1)">-1</button>
  <input ng-model="data.qty">
  <button ng-click="updateQty(1)">+1</button>
</div>

Upvotes: 1

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

I don't quite understand what you are trying to implement, but you can use ng-click on your buttons to execute some function in your controller. 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.qty = 0;

  $scope.change = function(value) {
    $scope.qty += value;
    $scope.changed(); // execute after update
  }
  $scope.changed = function() {
    /* 
     Do what you want after the update, 
     but $scope.qty is dynamic anyway 
    */
    //alert("qty: " + $scope.qty);
  }
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>
  <div ng-app="myApp">
    <div ng-controller="myCtrl">

      <button ng-click="change(-1)" type="button">-</button>
      <input type="number" ng-model="qty" ng-change="changed()" />
      <button ng-click="change(1)" type="button">+</button>
      <br/>{{qty}}

    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions