ng-switch 不适合我
ng-switch not working for me
我不明白为什么 ng-switch 对我不起作用。看来我所做的一切都是应该的。
没有显示带有 ng-switch 指令的 DIV。很可能我在 ng-switch-when 中输入了错误的值，但我无法理解如何修复它。
<div class="row">
<div class="col-xs-12 col-sm-6">Размер дверной коробки
<div class='input' ng-repeat="a in sizeswitch">
<input type="radio" name='radio' ng-model="$parent.selectedSizeSwitch" ng-value="a.desc" id="@{{a.value}}">
<label for="{{a.value}}">{{a.label}}</label>
</div>
</div>
<div ng-switch on="$parent.selectedSizeSwitch">
<div class="col-xs-12 col-sm-6" ng-switch-when="Стандартный">Стандартные размеры дверной коробки (мм)
<div class="custom-dropdown custom-dropdown--white">
<select ng-model="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="DoorSizeB" placeholder=""><label for="door_size_b">Ширина дверной коробки, мм</label>
</div>
<div class='input'>
<input name="door_size_h" id="input2" type="text" ><label for="door_size_h">Высота дверной коробки, мм</label>
</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">
<caption>Итоговая спецификация</caption>
<tbody>
<tr><td>Опция</td> <td>Значение</td> <td>Цена, руб</td></tr>
<tr><td>Размер дверной коробки (мм):</td> <td>{{selectedSizeSwitch}}, {{selectedStandardSize.label}}</td> <td>{{selectedStandardSize.price}}</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>
{{selectedStandardSize.price + 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" type="text" required>
<label for="name">Ваше имя *</label>
</div>
<div class="input">
<input id="phone" name="tel" type="text" required>
<label for="phone">Номер телефона *</label>
</div>
<div class="input">
<input id="email" name="email" type="email" required>
<label for="email">Адрес электронной почты *</label>
</div>
</div>
<div class="col-sm-6">
<div class="input">
<textarea id="message" name="message" ></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">Отправить заказ</button>
</div>
</form>
angular
.module('SaunaDoorCalc',[])
.controller('SaunaDoorCalcController', function($scope) {
$scope.sizeswitch = [
{ label: 'Стандартный', value: 'standard', desc: 'Стандартный'},
{ label: 'Ввести размер', value: 'special', desc: 'Нестандартный'}
];
$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.submit = function() {
alert('submit');
};
});
与其使用 $parent，不如使用在范围内定义的对象，例如 $scope.outerScope
<input type="radio" name='radio' ng-model="outerScope.selectedSizeSwitch"
ng-value="a.desc" id="@{{a.value}}">
并在控制器中将其初始化为空对象
$scope.outerScope = {};
这是一个工作示例http://codepen.io/mkl/pen/oLZbYo
您也可以通过从 <div ng-switch on="selectedSizeSwitch">
中删除 $parent 来解决此问题
你 运行 遇到的问题是 ng-repeat 的范围，repeat 中的每个项目都在创建自己的范围，这就是为什么你需要在那里而不是使用 $parent在开关中。
第二个例子http://codepen.io/mkl/pen/YWZwLj
对于两者，您需要将 <div class="col-xs-12 col-sm-6" ng-switch-when="Ввести размер"> 更新为 <div class="col-xs-12 col-sm-6" ng-switch-when="Нестандартный"> 它正在寻找错误的值。
我不明白为什么 ng-switch 对我不起作用。看来我所做的一切都是应该的。
没有显示带有 ng-switch 指令的 DIV。很可能我在 ng-switch-when 中输入了错误的值，但我无法理解如何修复它。
<div class="row">
<div class="col-xs-12 col-sm-6">Размер дверной коробки
<div class='input' ng-repeat="a in sizeswitch">
<input type="radio" name='radio' ng-model="$parent.selectedSizeSwitch" ng-value="a.desc" id="@{{a.value}}">
<label for="{{a.value}}">{{a.label}}</label>
</div>
</div>
<div ng-switch on="$parent.selectedSizeSwitch">
<div class="col-xs-12 col-sm-6" ng-switch-when="Стандартный">Стандартные размеры дверной коробки (мм)
<div class="custom-dropdown custom-dropdown--white">
<select ng-model="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="DoorSizeB" placeholder=""><label for="door_size_b">Ширина дверной коробки, мм</label>
</div>
<div class='input'>
<input name="door_size_h" id="input2" type="text" ><label for="door_size_h">Высота дверной коробки, мм</label>
</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">
<caption>Итоговая спецификация</caption>
<tbody>
<tr><td>Опция</td> <td>Значение</td> <td>Цена, руб</td></tr>
<tr><td>Размер дверной коробки (мм):</td> <td>{{selectedSizeSwitch}}, {{selectedStandardSize.label}}</td> <td>{{selectedStandardSize.price}}</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>
{{selectedStandardSize.price + 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" type="text" required>
<label for="name">Ваше имя *</label>
</div>
<div class="input">
<input id="phone" name="tel" type="text" required>
<label for="phone">Номер телефона *</label>
</div>
<div class="input">
<input id="email" name="email" type="email" required>
<label for="email">Адрес электронной почты *</label>
</div>
</div>
<div class="col-sm-6">
<div class="input">
<textarea id="message" name="message" ></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">Отправить заказ</button>
</div>
</form>
angular
.module('SaunaDoorCalc',[])
.controller('SaunaDoorCalcController', function($scope) {
$scope.sizeswitch = [
{ label: 'Стандартный', value: 'standard', desc: 'Стандартный'},
{ label: 'Ввести размер', value: 'special', desc: 'Нестандартный'}
];
$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.submit = function() {
alert('submit');
};
});
与其使用 $parent，不如使用在范围内定义的对象，例如 $scope.outerScope
<input type="radio" name='radio' ng-model="outerScope.selectedSizeSwitch"
ng-value="a.desc" id="@{{a.value}}">
并在控制器中将其初始化为空对象
$scope.outerScope = {};
这是一个工作示例http://codepen.io/mkl/pen/oLZbYo
您也可以通过从 <div ng-switch on="selectedSizeSwitch">
$parent 来解决此问题
你 运行 遇到的问题是 ng-repeat 的范围，repeat 中的每个项目都在创建自己的范围，这就是为什么你需要在那里而不是使用 $parent在开关中。
第二个例子http://codepen.io/mkl/pen/YWZwLj
对于两者，您需要将 <div class="col-xs-12 col-sm-6" ng-switch-when="Ввести размер"> 更新为 <div class="col-xs-12 col-sm-6" ng-switch-when="Нестандартный"> 它正在寻找错误的值。