无法在角Js中使用ng-if检索下拉ng模型值。
无法在角Js中使用ng-if检索下拉ng模型值。
提问于 2017-09-07 06:15:00
我有3 dropdowns.Dropdown将首先控制，出Dropdown 2 & Dropdown 3哪个下拉列表来填充。
我使用ng-if来完成这个任务，我可以在第二个下拉列表中使用ng-if，但是当我不能在第三个下拉列表中使用ng-if时。
我发现的原因是，dropdown 2没有绑定任何值。
我不知道为什么会这样。
码
<select ng-model="selcetedValue">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select ng-model="selcetedValueSecond" ng-if="selcetedValue === 'B'">
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
<select ng-model="selcetedValueThird" ng-if="selcetedValueSecond === 'H'">
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
</select>
<p>Selected value from first dropdown:: <i>{{selcetedValue}}</i></p>
<p>Selected value from second dropdown:: <i>{{selcetedValueSecond}}</i></p>请帮帮忙。
回答 5
Stack Overflow用户
回答已采纳
发布于 2017-09-07 06:19:35
ngIf创建自己的作用域，您应该在$scope中定义一个对象，然后使用该对象将ngModel与select元素绑定。
$scope.selectValues ={};然后在视图中使用它
<select ng-model="selectValues.selcetedValue">
</select>
<select ng-model="selectValues.selcetedValueSecond" ng-if="selectValues.selcetedValue === 'B'">
</select>
<select ng-model="selectValues.selcetedValueThird" ng-if="selectValues.selcetedValueSecond === 'H'">
</select>
var app = angular.module("app", []);
app.controller("myCtrl", function($scope, $filter, $sce) {
$scope.selectValues = {};
});<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<select ng-model="selectValues.selcetedValue">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select ng-model="selectValues.selcetedValueSecond" ng-if="selectValues.selcetedValue === 'B'">
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
<select ng-model="selectValues.selcetedValueThird" ng-if="selectValues.selcetedValueSecond === 'H'">
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
</select>
<p>Selected values <i>{{selectValues}}</i></p>
</body>
</html>
Stack Overflow用户
发布于 2017-09-07 06:20:30
ng-if将创建自己的子范围。因此，您的ng-model值不直接绑定到控制器作用域。您可以使用控制器作为语法来避免这种情况。其他解决方案是将ng-model绑定到对象。控制器作为语法更可取，因为它将隐式地处理Dot规则。
var app = angular.module("app", []);
app.controller("myCtrl", function() {
var vm =this;
});<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head>
<body ng-controller="myCtrl as vm">
<select ng-model="vm.selcetedValue">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select ng-model="vm.selcetedValueSecond" ng-if="vm.selcetedValue === 'B'">
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
<select ng-model="vm.selcetedValueThird" ng-if="vm.selcetedValueSecond === 'H'">
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
</select>
<p>Selected value from first dropdown:: <i>{{vm.selcetedValue}}</i></p>
<p>Selected value from second dropdown:: <i>{{vm.selcetedValueSecond}}</i></p>
<p>Selected value from third dropdown:: <i>{{vm.selcetedValueThird}}</i></p>
</body>
</html>
Stack Overflow用户
发布于 2017-09-07 06:21:18
您应该使用控制器作为语法：
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp">
<div ng-controller="myctrl as $ctrl">
<select ng-model="$ctrl.selcetedValue">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select ng-model="$ctrl.selcetedValueSecond" ng-if="$ctrl.selcetedValue === 'B'">
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
<select ng-model="$ctrl.selcetedValueThird" ng-if="$ctrl.selcetedValueSecond === 'H'">
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
</select>
<p>Selected value from first dropdown:: <i>{{$ctrl.selcetedValue}}</i></p>
<p>Selected value from second dropdown:: <i>{{$ctrl.selcetedValueSecond}}</i></p>
</div>
</div>
<script>
angular.module('myApp',[])
.controller('myctrl',function(){
})
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46089068
复制相关文章
相似问题
腾讯云开发者
