Question

我有两个数组。第一个数组名称是带有标题的标题。第二个数组名称是具有选项值的列。我重复了第一个数组。如果我选择一个选项，我想从其他选择中隐藏选择的选项。我该怎么办？

$scope.titles = [
    {id: 1, name: 'A1'},
    {id: 2, name: 'A2'},
    {id: 3, name: 'A3'},
    {id: 4, name: 'A4'}
];        

$scope.columns = [
    {id: 1, name: 'Title'},
    {id: 2, name: 'City'},
    {id: 3, name: 'Town'},
    {id: 4, name: 'Nh'}
];

$scope.setColumn = function (id, type) {
    for (var a = 0; a < $scope.columns.length; a++) {
        if ($scope.columns[a].name == type) {
            $scope.titles[id].selectedId = $scope.columns[a].id;
            $scope.titles[id].selectedValue = $scope.columns[a].name;
            $scope.columns[a].selected = true;
        }
    }
}

<div class="col-md-4 mt-5" data-ng-repeat="i in titles">
    <div class="form-group">
        <label for="s1" class="col-md-3 col-form-label">{{i.name}}</label>
        <div class="col-md-9">
            <select ng-options="item.name for item in columns"
                    class="form-control"
                    ng-model="selectedItem"
                    ng-change="setColumn(i.id, selectedItem.name);">
                <option value="">Set options</option>
            </select>
        </div>
    </div>
</div>

Answer 1

在ng-repeat内部进行输入的一种方法是将输入绑定到迭代器：

<div class="col-md-4 mt-5" data-ng-repeat="i in titles" 
     ng-init="titleIndex = $index">
    <div class="form-group">
        <label for="s1" class="col-md-3 col-form-label">{{i.name}}</label>
        <div class="col-md-9">
            <select ng-options="item.id as item.name for item in columns"
                    class="form-control"
                    ng-model="i.selectedColumnId"
                    ng-change="setColumn(titleIndex, i)">
                <option value="">Set options</option>
            </select>
        </div>
    </div>
</div>

这允许控制器控制每个<select>输入的选择。

AngularJs从其他选择中过滤选择的选项

1 个答案: