$ scope。$ setPristine（）无法处理角度

Question

请帮我完成表格

我无法理解两件事：

1）为什么$ setPristine（）在单击按钮后不清除文本字段？

2）为什么ng-model =“calcname”，ng-model =“doorsize”，ng-model =“baseprice”的值不与其他ng-model一起发送给JSON？

// sauna door calculator

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

    $scope.outerScope = {};
    $scope.formData = {};

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

    $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];
    // Default is 685x1880 - second array element. First element index is 0.

    $scope.glass = [{
      label: 'Прозрачное (стандарт)',
      price: 0
    }, {
      label: 'Матовое (Matelux)',
      price: 1000
    }, {
      label: 'Бронза (Bronze)',
      price: 1500
    }, {
      label: 'Матовая Бронза (Matelux Bronze)',
      price: 2000
    }, {
      label: 'Черное',
      price: 4000
    }];
    $scope.selectedGlass = $scope.glass[0];

    $scope.korobka = [{
      label: 'Липа (стандарт)',
      price: 1000
    }, {
      label: 'Лиственница',
      price: 2000
    }, {
      label: 'Бук',
      price: 3000
    }, {
      label: 'Дуб',
      price: 6000
    }];
    $scope.selectedKorobka = $scope.korobka[0];

    $scope.petli = [{
      label: 'Хром (стандарт)',
      price: 900
    }, {
      label: 'Бронза',
      price: 1900
    }, {
      label: 'Золото',
      price: 2000
    }];
    $scope.selectedPetli = $scope.petli[0];

    $scope.dekor = [{
      label: 'Нет',
      price: 0
    }, {
      label: 'Пескоструйный рисунок',
      price: 1000
    }, {
      label: 'Лазерная гравировка',
      price: 1500
    }, {
      label: 'Фотопечать',
      price: 2000
    }, {
      label: 'Пескоструйный рисунок с фьюзингом',
      price: 3000
    }];
    $scope.selectedDekor = $scope.dekor[0];

    $scope.dostavka = [{
      label: 'Нет',
      price: 0
    }, {
      label: 'в пределах МКАД',
      price: 1500
    }, {
      label: 'за МКАД',
      price: 1500
    }];
    $scope.selectedDostavka = $scope.dostavka[0];
    $scope.montazh = 0;

    $scope.url = '/izdeliya-iz-stekla/steklyannye-dveri/steklyannye-dveri-dlya-sauny';

    $scope.submit = function(isValid) {
      if (isValid) {
        $http.post($scope.url, {
          "calcname": $scope.calcname,
          "doorsize": $scope.doorsize,
          "baseprice": $scope.baseprice,
          "glass": $scope.selectedGlass,
          "korobka": $scope.selectedKorobka,
          "petli": $scope.selectedPetli,
          "dekor": $scope.selectedDekor,
          "dostavka": $scope.selectedDostavka,
          "montazh": $scope.montazh,
          "name": $scope.name,
          "tel": $scope.tel,
          "email": $scope.email,
          "msg": $scope.msg,
        }).
        success(function(data, status) {
          console.log(data);
          $scope.status = status;
          $scope.data = data;
          $scope.result = data;
        });
        $scope.calculator.$setPristine();
        $scope.message = 'Заказ отправлен. В ближайшее время мы с вами свяжемся.';

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

    }


  });

table {
  border-collapse: collapse;
}
table td {
  border: 1px solid #0088cc;
}

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

  <input name="calcname" ng-model="calcname" type="hidden" value="saunadoor">

  <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">
    <div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Стекло</span>
      <div class="custom-dropdown custom-dropdown--white">
        <select ng-model="selectedGlass" ng-options="c.label for c in glass" class="custom-dropdown__select custom-dropdown__select--white"></select>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Материал коробки</span>
      <div class="custom-dropdown custom-dropdown--white">
        <select ng-model="selectedKorobka" ng-options="d.label for d in korobka" class="custom-dropdown__select custom-dropdown__select--white"></select>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Петли</span>
      <div class="custom-dropdown custom-dropdown--white">
        <select ng-model="selectedPetli" ng-options="e.label for e in petli" class="custom-dropdown__select custom-dropdown__select--white"></select>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Декор</span>
      <div class="custom-dropdown custom-dropdown--white">
        <select ng-model="selectedDekor" ng-options="f.label for f in dekor" class="custom-dropdown__select custom-dropdown__select--white"></select>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-sm-6"><span class="col-xs-6 col-sm-3">Доставка</span>
      <div class="custom-dropdown custom-dropdown--white">
        <select ng-model="selectedDostavka" ng-options="g.label for g in dostavka" class="custom-dropdown__select custom-dropdown__select--white"></select>
      </div>
    </div>

    <div class='input col-xs-12 col-sm-6'>
      <input type='checkbox' id='montazh' ng-model="montazh" ng-true-value="1500" ng-false-value="0" />
      <label for="montazh">Монтаж</label>
    </div>
  </div>


  <table class="result table table-hover table-striped table-bordered table-condensed" ng-switch on="selectedSizeSwitch">
    <caption>Итоговая спецификация</caption>
    <tbody>
      <tr>
        <td>Опция</td>
        <td>Значение</td>
        <td>Цена, руб</td>
      </tr>
      <tr>
        <td>Размер дверной коробки (мм):</td>
        <td ng-switch-default ng-model="doorsize">{{selectedSizeSwitch}}, {{selectedStandardSize.label}}</td>
        <td ng-switch-when="Нестандартный" ng-model="doorsize">{{selectedSizeSwitch}}, {{DoorSizeB}}x{{DoorSizeH}}</td>
        <td ng-switch-default ng-model="baseprice">{{selectedStandardSize.price}}</td>
        <td ng-switch-when="Нестандартный" ng-model="baseprice">{{DoorSizeB*DoorSizeH*5000/1000000}}</td>
      </tr>

      <tr>
        <td>Стекло</td>
        <td>{{selectedGlass.label}}</td>
        <td>{{selectedGlass.price}}</td>
      </tr>
      <tr>
        <td>Материал дверной коробки:</td>
        <td>{{selectedKorobka.label}}</td>
        <td>{{selectedKorobka.price}}</td>
      </tr>
      <tr>
        <td>Петли:</td>
        <td>{{selectedPetli.label}}</td>
        <td>{{selectedPetli.price}}</td>
      </tr>
      <tr>
        <td>Декор:</td>
        <td>{{selectedDekor.label}}</td>
        <td>{{selectedDekor.price}}</td>
      </tr>
      <tr>
        <td>Доставка:</td>
        <td>{{selectedDostavka.label}}</td>
        <td>{{selectedDostavka.price}}</td>
      </tr>
      <tr>
        <td>Монтаж:</td>
        <td>{{montazh.label}}</td>
        <td>{{montazh}}</td>
      </tr>

      <tr>
        <td>Стоимость двери:</td>
        <td></td>
        <td ng-switch-default>{{selectedStandardSize.price + selectedGlass.price + selectedKorobka.price + selectedPetli.price + selectedDekor.price + selectedDostavka.price + montazh}}</td>
        <td ng-switch-when="Нестандартный">{{DoorSizeB*DoorSizeH*5000/1000000 + selectedGlass.price + selectedKorobka.price + selectedPetli.price + selectedDekor.price + selectedDostavka.price + montazh}}</td>
      </tr>
    </tbody>
  </table>


  <div class="col-sm-6">
    <div class="input">
      <input id="name" name="name" ng-model="name" type="text" required>
      <label for="name">Ваше имя *</label>
    </div>
    <div class="input">
      <input id="phone" name="tel" ng-model="tel" type="text" required>
      <label for="phone">Номер телефона *</label>
    </div>
    <div class="input">
      <input id="email" name="email" ng-model="email" type="email" required>
      <label for="email">Адрес электронной почты *</label>
    </div>
  </div>

  <div class="col-sm-6">
    <div class="input">
      <textarea id="msg" name="msg" ng-model="msg"></textarea>
      <label for="message">Комментарии</label>
    </div>
  </div>


  <div class="footer col-xs-12 col-sm-6">
    <button type="submit" class="btn btn-primary pull-right" ng-click="submit(calculator.$valid)">Отправить заказ</button>
  </div>


</form>

Answer 1

1）您必须将数据模型设置为null。例如

$parent.selectedStandardSize = null;

2）这是因为ngSwitch创建了新范围。