2017-03-14 48 views
-2

我在AngularJs中创建了一个示例,其中有3个选择框。当用户在第一个选择框中选择第一个选项时,应该在2和3选择框中不可见。AngularJS比较3选择框值

例如男性,女性,孩子。所以如果我在第一个选择框中选择Men,同样不应该在2和3选择框中出现。

请指导和帮助。下面是我的代码

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script> 
<body> 

<div ng-app="myApp" ng-controller="myCtrl"> 
    <select ng-model="carModel1" > 
    <option value="">Select</option> 
    <option ng-repeat="car in carList" value="{{car.modelNo}}" ng-show="car.isShow"> {{car.modelName}}</option> 
</select> 

    <select ng-model="carModel2" > 
<option value="">Select</option> 
<option ng-repeat="car in carList" value="{{car.modelNo}}" ng-show="car.isShow"> {{car.modelName}}</option> 
</select> 
<select ng-model="carModel3" > 
<option value="">Select</option> 
<option ng-repeat="car in carList" value="{{car.modelNo}}" ng-show="car.isShow"> {{car.modelName}}</option> 
</select> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
$scope.carList = [ 
    {isShow: true, modelName: "Fiesta", modelNo: "447"}, 
    {isShow: true, modelName: "Maruti", modelNo: "442"}, 
    {isShow: true, modelName: "Escape", modelNo: "445"} 
]; 
}); 
</script> 


</body> 
</html> 
+1

请分享您的代码。 –

+0

如果你陷入某个地方,请从最终共享中进行某种实验 –

+0

您需要创建一个函数,并将其称为第一个选择框的ng-blur,并更改该函数中其他选择标记的列表。它的连击器可以共享代码,所以有些人可以帮助你更多。 –

回答

0
<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="myCtrl"> 
<select ng-model="selectedName" ng-options="x for x in names"> 
</select> 

<select ng-model="selectedName1"> 
<option ng-repeat="x in names" ng-if="x !== selectedName">{{x}}</option> 
</select> 

</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.names = ["men", "women", "children"]; 

}); 
</script> 

<p>This example shows how to fill a dropdown list using the ng-options directive.</p> 

</body> 
</html> 

试试这个