AngularJs фильтр выбранной опции из другой выбор - PullRequest
0 голосов
/ 17 февраля 2020

У меня есть два массива. Первое имя массива title имеет заголовки. Второе имя массива - столбцы со значениями параметров. Я повторил первый массив. Если я выбираю опцию, я хочу скрыть выбранную опцию от других выборов. Как я могу это сделать?

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

1 Ответ

1 голос
/ 18 февраля 2020

Один из подходов к входам внутри 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> входа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...