Question

我有3 dropdowns。\ n \ n下拉首先会控制Dropdown 2＆amp; 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>

请帮忙。

Answer 1

ng-if将创建自己的子范围。因此，您的ng-model值不会直接绑定到控制器范围。您可以使用控制器作为语法来避免它。其他解决方案是将ng-model绑定到对象。控制器作为语法是更优选的，因为它将隐式地处理点规则。

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>

了解详情：What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Answer 2

您应该使用控制器作为语法：

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

Answer 3

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>

Answer 4

您应该使用ng-show/hide代替ng-if，因为第二个下拉列表如果您使用scope，则DOM不在当前ng-if中。因此，第三个下拉列表ng-if不知道在该表达式中分配了哪个范围值。

ngIf

ngIf指令根据表达式删除或重新创建DOM树的一部分。如果分配给ngIf的表达式求值为false值，则从DOM中删除该元素，否则将该元素的克隆重新插入到DOM中。阅读此讨论了解更多详情; what is the difference between ng-if and ng-show/ng-hide

＆＃13;

angular.module("aaa",[]).controller("ccc",function($scope)
{
$scope.selcetedValue="";
$scope.selcetedValueSecond="";
$scope.selcetedValueThird="";
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="aaa" ng-controller="ccc">

<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>

</div>

＆＃13;

Answer 5

使用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>

请参阅此JsFiddle

在Angular Js中，无法使用ng-if检索下拉ng模型值

5 个答案:

ngIf