角度變量不隨ngmodel值變化

Question

我有角度腳本和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>