Question

我在AngularJs中创建了一个示例，其中我有3个选择框。当用户在第一个选择框中选择第一个选项时，在2和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>

Answer 1

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

试试这个

AngularJS比较3个选择框值

1 个答案: