Remove/hide 来自 ng-option 的项目，如果该项目被 ng-repeat 中的另一个 select 框 select 编辑

Question

如果项目被另一个 ng-option 选择，如何remove/hide ng-repeat 中的 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); 
      }); 
    }

从上面的代码中，该项目已从数据中删除，但是显示select.kindly建议，在此先感谢

Answer 1

以上代码完成了工作。我假设您的问题是，从 $scope.data 中删除所有元素后，您不希望用户访问显示 'select' 的下拉菜单，对吗？

您需要做的就是在 $scope.data 数组变空时禁用 <select> 标签。

代码如下所示-

var app = angular.module("myApp", []);

app.controller('testCtrl', ['$scope', function ($scope) {
 $scope.headers = ["foo", "bar", "baz"]; 
    $scope.data =["alpha", "beta", "gamma"]; 
    $scope.selectedColumn = {};
  $scope.emptyArr=false;
    $scope.selectColumn = function(selectedhead) { 
      // $scope.fileData.headers.splice(selectedhead); 
      $scope.data = $scope.data.filter(function(item){ 
        return !selectedhead || !angular.equals(item, selectedhead); 
      }); 
      console.log($scope.data);
      if($scope.data==""){    // this disables the <select> tag
       $scope.emptyArr=true;
      }
    }
   
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="testCtrl">
    <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" ng-disabled="emptyArr">
            <option value="">select</option>
          </select>
        </td>
      </tr>
    </table>

</div>

希望这就是你所要求的.. 干杯！

~ NiKhIL

Answer 2

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>

Remove/hide 来自 ng-option 的项目，如果该项目被 ng-repeat 中的另一个 select 框 select 编辑

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

javascript

angularjs

angularjs-ng-repeat

ng-options

angularjs-ng-options