javascriptangularjsangularjs-ng-repeatng-optionsangularjs-ng-options

Remove/hide the item from the ng-option if the item is selected by another select box inside ng-repeat


How to remove/hide the item from ng-option inside ng-repeat if item is selected by another ng-option?

    <table class="table table-bordered table-condensed">
      <tr>
        <th>Column Name</th>
        <th>Map to field</th>
      </tr>
      <tr ng-repeat="head in headers">
        <td>{{ head }}</td>
        <td>
          <select ng-model="selectedColumn[head]" 
            ng-change="selectColumn(selectedColumn[head])" 
            ng-options="row for row in data">
            <option value="">select</option>
          </select>
        </td>
      </tr>
    </table>

    $scope.headers = ["foo", "bar", "baz"]; 
    $scope.data =["alpha", "beta", "gamma"]; 
    $scope.selectedColumn = {};

    $scope.selectColumn = function(selectedhead) { 
      // $scope.fileData.headers.splice(selectedhead); 
      $scope.data = $scope.data.filter(function(item){ 
        return !selectedhead || !angular.equals(item, selectedhead); 
      }); 
    }

from above code the item get removed from data, however the shows select.kindly advise, thanks in advance


Solution

  • sindex.html

        <!DOCTYPE html>
        <html>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    
        <link rel="stylesheet" href="style.css"></style>
        <body>
            <div ng-app="App"  ng-controller="selectController">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-bordered table-condensed">
                                <tr>
                                <th>Column Name</th>
                                <th>Map to field</th>
                                </tr>
                                <tr ng-repeat="head in headers">
                                <td>{{ head }}</td>
                                <td>
                                    <select ng-model="selectedColumn[head]" 
                                        class="form-control"
                                   ng-options="opt for opt in filterRow(head)">
                                    <option value="">select</option>
                                    </select>
                                </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
    
            </div>  
        <script>
        var app = angular.module('App', []);
    
        app.controller('selectController', function($scope) {
            $scope.headers = ["foo", "bar", "baz"]; 
            $scope.data =["alpha", "beta", "gamma"]; 
            $scope.selectedColumn = {};
    
            // use this insted
            $scope.filterRow = function(head) { 
                return $scope.data.filter(function(d) {
                    return !(Object.values($scope.selectedColumn)).includes(d) || $scope.selectedColumn[head] === d;
                })
            }
        });
        </script>
    
        </body>
        </html>