variable in angular not changing with ngmodel value

Question

I have angular script and html form

angular
  .module('SaunaDoorCalc', [])
  .controller('SaunaDoorCalcController', function($scope, $http) {

    $scope.sizeswitch = [           
      { label: 'Стандартный', value: 'standard'},
      { label: 'Нестандартный', value: 'special'}
    ];
    $scope.selectedSizeSwitch = $scope.sizeswitch[0].label; // initial value

    $scope.standardsizes = [           
      { label: '585х1880', price:5600 },
      { label: '685x1880', price:3600 },
      { label: '685x1980', price:5600 },
      { label: '685x2080', price:5600 },
      { label: '685x2180', price:6600 },
      { label: '785x1880', price:5600 },
      { label: '785x1980', price:5600 },
      { label: '785x2080', price:5600 },
      { label: '785x2180', price:6600 }
    ];
    $scope.selectedStandardSize = $scope.standardsizes[1];

    .....

     if ($scope.selectedSizeSwitch == $scope.sizeswitch[0].label) {
         $scope.doorsize = $scope.selectedSizeSwitch + ', ' + $scope.selectedStandardSize.label;
     } else {
         $scope.doorsize = $scope.selectedSizeSwitch + ', ' + $scope.DoorSizeB + 'x' + $scope.DoorSizeH;
              }

    $scope.submit = function(isValid) {
      if (isValid) {
          $http.post($scope.url, 
            {
              "calcname": "saunadoor", 
              "doorsize": $scope.doorsize,            
              .......  // other variables from my form
            }).
                        success(function(data, status) {
                            console.log(data);
                            $scope.status = status;
                            $scope.data = data;
                            $scope.result = data; 
                        });
              $scope.name = null;
              $scope.tel = null;
              $scope.email = null;
              $scope.msg = null;
              $scope.DoorSizeB = null;
              $scope.DoorSizeH = null;
              $scope.calculator.$setPristine();
              $scope.message = 'Заказ отправлен. В ближайшее время мы с вами свяжемся.'; 

            }else{
              $scope.message = 'Заполните обязательные поля формы!'; 
            }

        }


  });

Here is the form code

<form ng-app="SaunaDoorCalc" ng-controller="SaunaDoorCalcController" class="calculator" name="calculator">

<div class="row">
    <div class="col-xs-12 col-sm-6">Размер дверной коробки
        <div class='input' ng-repeat="a in sizeswitch">
            <input type="radio" name='sizeswitch' ng-model="$parent.selectedSizeSwitch" ng-value="a.label" id="{{a.value}}">
            <label for="{{a.value}}">{{a.label}}</label>
        </div>
    </div>

   <div ng-switch on="selectedSizeSwitch">
    <div class="col-xs-12 col-sm-6" ng-switch-default>Стандартные размеры дверной коробки (мм)
        <div class="custom-dropdown custom-dropdown--white">
            <select ng-model="$parent.selectedStandardSize" ng-options="b.label for b in standardsizes" class="standard_sizes custom-dropdown__select custom-dropdown__select--white"></select>
        </div>
    </div>

    <div class="col-xs-12 col-sm-6" ng-switch-when="Нестандартный">Нестандартные размеры дверной коробки
        <div class='input'>
            <input name="door_size_b" id="input1" type="text" ng-model="$parent.DoorSizeB" ng-pattern="/^[0-9]{1,4}$/" placeholder=""><label for="door_size_b">Ширина дверной коробки, мм</label>
            <span ng-show="calculator.door_size_b.$error.pattern">Введите число от 0 до 9999мм</span>
        </div>

        <div class='input'>
            <input name="door_size_h" id="door_size_h" type="text" ng-model="$parent.DoorSizeH" ng-pattern="/^[0-9]{1,4}$/"><label for="door_size_h">Высота дверной коробки, мм</label>
            <span ng-show="calculator.door_size_b.$error.pattern">Введите число от 0 до 9999мм</span>
        </div>
    </div>
       </div>


    </div>

<div class="row alert alert-info">{{doorsize}}</div>

</form>

But doorsize variable always equal to initial value of selectedSizeSwitch and selectedStandardSize. Even if I change my form clicking on radio button or change selected dropdown value, anyway I always get this doorsize = Стандартный, 685x1880

G07cha · Accepted Answer · 2016-08-26 14:18:57Z

1

The problem is that selectedSizeSwitch is not being watched and as result doorsize only evaluated on start. I've converted doorsize to function and now it works properly.

angular
  .module('SaunaDoorCalc', [])
  .controller('SaunaDoorCalcController', function($scope, $http) {

    $scope.sizeswitch = [           
      { label: 'Стандартный', value: 'standard'},
      { label: 'Нестандартный', value: 'special'}
    ];
    $scope.selectedSizeSwitch = $scope.sizeswitch[0].label; // initial value

    $scope.standardsizes = [           
      { label: '585х1880', price:5600 },
      { label: '685x1880', price:3600 },
      { label: '685x1980', price:5600 },
      { label: '685x2080', price:5600 },
      { label: '685x2180', price:6600 },
      { label: '785x1880', price:5600 },
      { label: '785x1980', price:5600 },
      { label: '785x2080', price:5600 },
      { label: '785x2180', price:6600 }
    ];
    $scope.selectedStandardSize = $scope.standardsizes[1];
    $scope.doorsize = $scope.selectedSizeSwitch + ', ' + $scope.DoorSizeB + 'x' + $scope.DoorSizeH;
  
    $scope.getDoorsize = function() {
        if ($scope.selectedSizeSwitch == $scope.sizeswitch[0].label) {
         return $scope.selectedSizeSwitch + ', ' + $scope.selectedStandardSize.label;
        } else {
         return $scope.selectedSizeSwitch + ', ' + ($scope.DoorSizeB || 0) + 'x' + ($scope.DoorSizeH || 0);
        }
    };

    $scope.submit = function(isValid) {
      if (isValid) {
          $http.post($scope.url, 
            {
              "calcname": "saunadoor", 
              "doorsize": $scope.getDoorsize()
            }).
                        success(function(data, status) {
                            console.log(data);
                            $scope.status = status;
                            $scope.data = data;
                            $scope.result = data; 
                        });
              $scope.name = null;
              $scope.tel = null;
              $scope.email = null;
              $scope.msg = null;
              $scope.DoorSizeB = null;
              $scope.DoorSizeH = null;
              $scope.calculator.$setPristine();
              $scope.message = 'Заказ отправлен. В ближайшее время мы с вами свяжемся.'; 

            }else{
              $scope.message = 'Заполните обязательные поля формы!'; 
            }

        }


  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<form ng-app="SaunaDoorCalc" ng-controller="SaunaDoorCalcController" class="calculator" name="calculator">

<div class="row">
    <div class="col-xs-12 col-sm-6">Размер дверной коробки
        <div class='input' ng-repeat="a in sizeswitch">
            <input type="radio" name='sizeswitch' ng-model="$parent.selectedSizeSwitch" ng-value="a.label" id="{{a.value}}">
            <label for="{{a.value}}">{{a.label}}</label>
        </div>
    </div>

   <div ng-switch on="selectedSizeSwitch">
    <div class="col-xs-12 col-sm-6" ng-switch-default>Стандартные размеры дверной коробки (мм)
        <div class="custom-dropdown custom-dropdown--white">
            <select ng-model="$parent.selectedStandardSize" ng-options="b.label for b in standardsizes" class="standard_sizes custom-dropdown__select custom-dropdown__select--white"></select>
        </div>
    </div>

    <div class="col-xs-12 col-sm-6" ng-switch-when="Нестандартный">Нестандартные размеры дверной коробки
        <div class='input'>
            <input name="door_size_b" id="input1" type="text" ng-model="$parent.DoorSizeB" ng-pattern="/^[0-9]{1,4}$/" placeholder=""><label for="door_size_b">Ширина дверной коробки, мм</label>
            <span ng-show="calculator.door_size_b.$error.pattern">Введите число от 0 до 9999мм</span>
        </div>

        <div class='input'>
            <input name="door_size_h" id="door_size_h" type="text" ng-model="$parent.DoorSizeH" ng-pattern="/^[0-9]{1,4}$/"><label for="door_size_h">Высота дверной коробки, мм</label>
            <span ng-show="calculator.door_size_b.$error.pattern">Введите число от 0 до 9999мм</span>
        </div>
    </div>
       </div>


    </div>

<div class="row alert alert-info" ng-bind="getDoorsize()"></div>

</form>

answered Aug 26, 2016 at 14:18

G07cha

4,1842 gold badges25 silver badges40 bronze badges

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

5 Comments

schel4ok Over a year ago

Thanks a lot. This is solved my problem. Is it possible to get 2 variables as a result of this expression like this ng-bind="getDoorsize(size)" and ng-bind="getDoorsize(price)"? Just to avoid creating one more function watching selectedSizeSwitch again

G07cha Over a year ago

So you're basically want to search in standartsizes for item with this value, right? If so I suggest you to create a separate function for that.

schel4ok Over a year ago

now I do like that

$scope.getDoorSize = function() { if ($scope.selectedSizeSwitch == $scope.sizeswitch[0].label) {return $scope.selectedSizeSwitch + ', ' + $scope.selectedStandardSize.label; } else {          return $scope.selectedSizeSwitch + ', ' + ($scope.DoorSizeB || 0) + 'x' + ($scope.DoorSizeH || 0); } };    $scope.getBasePrice = function() {         if ($scope.selectedSizeSwitch == $scope.sizeswitch[0].label) {          return $scope.selectedStandardSize.price;         } else {          return $scope.DoorSizeB * $scope.DoorSizeH * 5000 / 1000000 ;  }   };

schel4ok Over a year ago

but it is 2 expressions watching selectedSizeSwitch. I think it is possible to join them together to optimize the code

G07cha Over a year ago

There is not only selectedSizeSwitch being watched, it also updates size. So you need binding which uses references to size then.

Collectives™ on Stack Overflow

variable in angular not changing with ngmodel value

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related