2017-03-14 49 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> 

試試這個