Javascript 无法使用ng if（角度Js）检索下拉ng模型值_Javascript_Angularjs

Javascript 无法使用ng if（角度Js）检索下拉ng模型值

javascript angularjs

Javascript 无法使用ng if（角度Js）检索下拉ng模型值,javascript,angularjs,Javascript,Angularjs,我有3个下拉列表。首先下拉列表将控制要填充的下拉列表2和下拉列表3。我使用的是ng if，我可以在第二个下拉菜单中使用ng if，但在第三个下拉菜单中无法使用ng if。我发现的原因是，下拉列表2没有绑定任何值。我不知道为什么会这样。代码 <select ng-model="selcetedValue"> <option value="A">A</option> <option value="B">B</option>

我有3个

下拉列表

。首先下拉列表将控制要填充的

下拉列表2

和

下拉列表3

。

我使用的是

ng if

，我可以在第二个下拉菜单中使用

ng if

，但在第三个下拉菜单中无法使用

ng if

。
我发现的原因是，

下拉列表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>


A.
B
C
D
E
F
G
H
我
J
K
L
从第一个下拉列表中选择的值：{{selcetedValue}
从第二个下拉列表中选择的值：{{selcetedValueSecond}

请提供帮助。

ngIf

创建自己的作用域，您应该在

$scope

中定义一个对象，然后使用该对象将

ngModel

与所选元素绑定

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


A.
B
C
D
E
F
G
H
我
J
K
L
选定值{{selectValues}}

ngIf

创建自己的作用域，您应该在

$scope

中定义一个对象，然后使用该对象将

ngModel

与所选元素绑定

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


A.
B
C
D
E
F
G
H
我
J
K
L
选定值{{selectValues}}

ng if

将创建自己的子作用域。因此，您的

ng model

值不会直接绑定到控制器范围。您可以使用控制器作为语法来避免它。另一种解决方案是将

ng模型

绑定到对象。控制器作为语法更为可取，因为它将隐式地处理点规则

var-app=angular.module（“app”，[]）；
app.controller（“myCtrl”，函数（）{
var vm=这个；
});

A.
B
C
D
E
F
G
H
我
J
K
L
从第一个下拉列表中选择的值：{vm.selectedValue}
从第二个下拉列表中选择的值：{vm.selcetedValueSecond}
从第三个下拉列表中选择的值：{vm.selcetedValueThird}
ng if
将创建自己的子作用域。因此，您的ng model
值不会直接绑定到控制器范围。您可以使用控制器作为语法来避免它。另一种解决方案是将ng模型
绑定到对象。控制器作为语法更为可取，因为它将隐式地处理点规则

var-app=angular.module（“app”，[]）；
app.controller（“myCtrl”，函数（）{
var vm=这个；
});

A.
B
C
D
E
F
G
H
我
J
K
L
从第一个下拉列表中选择的值：{vm.selectedValue}
从第二个下拉列表中选择的值：{vm.selcetedValueSecond}
从第三个下拉列表中选择的值：{vm.selcetedValueThird}
您应该使用控制器作为语法：
<!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>


A.
B
C
D
E
F
G
H
我
J
K
L
从第一个下拉列表中选择的值：{$ctrl.selcetedValue}
从第二个下拉列表中选择的值：{$ctrl.selcetedValueSecond}
angular.module（'myApp'，[]）
.controller（'myctrl'，function（）{
})
您应该使用控制器作为语法：
<!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>


A.
B
C
D
E
F
G
H
我
J
K
L
从第一个下拉列表中选择的值：{$ctrl.selcetedValue}
从第二个下拉列表中选择的值：{$ctrl.selcetedValueSecond}
angular.module（'myApp'，[]）
.controller（'myctrl'，function（）{
})
改用ng show/ng hide
<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-show="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-show="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>


A.
B
C
D
E
F
G
H
我
J
K
L
从第一个下拉列表中选择的值：{{selcetedValue}
从第二个下拉列表中选择的值：{{selcetedValueSecond}

请参见此
改用ng show/ng hide
<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-show="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-show="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>


A.
B
C
D
E
F
G
H
我
J
K
L
从第一个下拉列表中选择的值：{{selcetedValue}
从第二个下拉列表中选择的值：{{selcetedValueSecond}

看到这个了吗
您应该使用ng show/hide
而不是ng if
，因为如果使用ng if
，您的第二个下拉列表DOM不在当前的范围内。因此，第三个下拉列表ng if
不知道在表达式中分配了哪个范围值
ngIf
ngIf指令基于表达式删除或重新创建DOM树的一部分。如果指定给ngIf的表达式的计算结果为假值，则该元素将从DOM中删除，否则将该元素的克隆重新插入DOM。
阅读此讨论了解更多详细信息

angular.module（“aaa”，[]）控制器（“ccc”，功能（$scope）
{
$scope.selcetedValue=“”；
$scope.selcetedValueSecond=“”；
$scope.selcetedValueThird=“”；
});

A.
B
C
D
E
F
G
H
我
J
K
L
从第一个下拉列表中选择的值：{{selcetedValue}
从第二个下拉列表中选择的值：{{selcetedValueSecond}

您应该使用ng show/hide
而不是ng if
，因为如果使用ng if
，您的第二个下拉列表DOM不在当前的范围内。因此，第三个下拉列表ng if
不知道在表达式中分配了哪个范围值
ngIf
ngIf指令基于表达式删除或重新创建DOM树的一部分。如果指定给ngIf的表达式的计算结果为假值，则该元素将从DOM中删除，否则将该元素的克隆重新插入DOM。
阅读此讨论了解更多详细信息

angular.module（“aaa”，[]）控制器（“ccc”，功能（$scope）
{
$scope.selcetedValue=“”；
$scope.selcetedValueSecond=“”；
$scope.selcetedValueThird=“”；
});

A.
B
C
D
E
F
G
H
我
J
K
L
从第一个下拉列表中选择的值：{{selcetedValue}
从第二个下拉列表中选择的值：{{selcetedValueSecond}
ng show
只会隐藏