schel4ok schel4ok - 3 months ago 11
AngularJS Question

variable in angular not changing with ngmodel value

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

Answer

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>