Question

我有两个下降。最初两者的值都是＆＃34; First＆＃34;，＆＃34; Second＆＃34;，＆＃34; Third＆＃34;，... 当第一次下拉有价值＆＃34;第一＆＃34;第二个不应该提供价值＆＃34;第一＆＃34;第二个应该不是从第一个选择的。我想用angularjs做到这一点。第二个下拉列表中的值应该动态更改。

<select class="form-control" ng-model="Data.firstType">
  <option>First</option>
  <option>Second</option>
  <option>Third</option>
</select>

<select class="form-control" ng-model="Data.SecondType">
  <option>First</option>
  <option>Second</option>
  <option>Third</option>
</select>

有人可以为此提供帮助吗？

提前致谢。

Answer 1

如果下拉列表中的项目是静态的，您可以执行此操作fiddle

ng-if="Data.FirstType !== First"

如果它们是动态的，那么您可以根据第一个下拉列表中选择的项目过滤第二个列表中的项目

如果动态填充列表，这里有fiddle动态过滤第二个列表。

function MyCtrl($scope){
    $scope.Data = {};
    $scope.items = [{id:1, name:'First'}, {id:2, name:'Second'}, {id:3, name:'Third'}];
    $scope.exclude = function(x){
        return x !== $scope.Data.firstType;
    }
}

Answer 2

只需使用$ watch：

$scope.$watch('Data.firstType', function(val) {
    //Get index of type in Data.yourArrayData
    var idx = $scope.Data.yourArrayData.indexOf(val);
    $scope.Data.yourArrayData.splice(idx, 1);
});

这假设您使用ng-repeat将第二个选择绑定到yourArrayData。我没有测试过这段代码，但它应该是你需要的。

如何使用angular使用其他下拉更改动态更改下拉列表中的值？

2 个答案: