Как удалить / скрыть элемент из ng-option внутри ng-repeat, если элемент выбран другим ng-параметром?

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

из вышеприведенного кода элемент удаляется из данных, однако показы выбираются. пожалуйста, сообщите, заранее спасибо

Приведенный выше код делает работу. Я предполагаю, что ваш вопрос заключается в том, что после удаления всех элементов из $scope.data вы не хотите, чтобы пользователь получил доступ к этому раскрывающемуся $scope.data , который показывает ‘select’, верно?

Все, что вам нужно сделать, это отключить {amp}lt;select{amp}gt; когда массив $scope.data станет пустым.

Код иллюстрируется ниже —

 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 {amp}lt;select{amp}gt; tag $scope.emptyArr=true; } } }]); 
 {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div ng-app="myApp" ng-controller="testCtrl"{amp}gt; {amp}lt;table class="table table-bordered table-condensed"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Column Name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Map to field{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr ng-repeat="head in headers"{amp}gt; {amp}lt;td{amp}gt;{{ head }}{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;select ng-model="selectedColumn[head]" ng-change="selectColumn(selectedColumn[head])" ng-options="row for row in data" ng-disabled="emptyArr"{amp}gt; {amp}lt;option value=""{amp}gt;select{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; 

Надеюсь, это то, что вы просили .. Ура!

~ НИХИЛ

s index.html

  {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"{amp}gt; {amp}lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"{amp}gt; {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;link rel="stylesheet" href="style.css"{amp}gt;{amp}lt;/style{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div ng-app="App" ng-controller="selectController"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-12"{amp}gt; {amp}lt;table class="table table-bordered table-condensed"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Column Name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Map to field{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr ng-repeat="head in headers"{amp}gt; {amp}lt;td{amp}gt;{{ head }}{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;select ng-model="selectedColumn[head]" class="form-control" ng-options="opt for opt in filterRow(head)"{amp}gt; {amp}lt;option value=""{amp}gt;select{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; 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; }) } }); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt;