javascript - Angular 变量不随 ngmodel 值变化

Question

我有 Angular 脚本和 html 表单

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 = 'Заполните обязательные поля формы!'; 
            }

        }


  });

这是表单代码

<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>

但是doorsize变量始终等于selectedSizeSwitch和selectedStandardSize的初始值。 即使我单击单选按钮更改表单或更改选定的下拉值，无论如何我总是得到这个 doorsize = Стандартный, 685x1880

Answer 1

问题是 selectedSizeSwitch 没有被监视，因此 doorsize 仅在启动时评估。我已将 doorsize 转换为功能，现在它可以正常工作。

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>