Remove/hide the item from the ng-option if the item is selected by another select box inside ng-repeat
2
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));
from above code the item get removed from data, however the shows select.kindly advise, thanks in advance
javascript angularjs angularjs-ng-repeat ng-options angularjs-ng-options
asked Aug 20 at 11:59
Vignesh Nayak
111
add a comment |
2
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));
from above code the item get removed from data, however the shows select.kindly advise, thanks in advance
javascript angularjs angularjs-ng-repeat ng-options angularjs-ng-options
asked Aug 20 at 11:59
Vignesh Nayak
111
add a comment |
2
2
2
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));
from above code the item get removed from data, however the shows select.kindly advise, thanks in advance
javascript angularjs angularjs-ng-repeat ng-options angularjs-ng-options
asked Aug 20 at 11:59
Vignesh Nayak
111
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));
from above code the item get removed from data, however the shows select.kindly advise, thanks in advance
javascript angularjs angularjs-ng-repeat ng-options angularjs-ng-options
javascript angularjs angularjs-ng-repeat ng-options angularjs-ng-options
asked Aug 20 at 11:59
Vignesh Nayak
111
asked Aug 20 at 11:59
Vignesh Nayak
111
asked Aug 20 at 11:59
Vignesh Nayak
111
asked Aug 20 at 11:59
Vignesh Nayak
111
asked Aug 20 at 11:59
Vignesh Nayak
111
111
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
The above code does the job. I assume your question is, after removing all elements from $scope.data you don't want the user to access that dropdown which shows 'select', right?
All you need to do is disable the <select> tag when the $scope.data array gets empty.
The Code is illustrated bellow -
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) !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>Hope That's what you asked for..
Cheers!
~ NiKhIL
answered Aug 20 at 13:33
Nikhil Zurunge
2177
if i am selecting an item from <select> tag then the item must be not available for any another <select> tag inside ng-repeat for e.g if i am selecting "alpha" then "alpha" will be not available for next <select> tag inside ng-repeat. Hope that make some sense!!!
– Vignesh Nayak
Aug 20 at 13:52
Thanks for the replay.
– Vignesh Nayak
Aug 20 at 13:53
Yea, If you select 'alpha' from one <select> tag , its not visible in another <select> tag , its already in your code
– Nikhil Zurunge
Aug 20 at 14:05
Yes, however when an item is selected, the <select> tag set's to select
– Vignesh Nayak
Aug 21 at 5:24
1
codepen.io/anon/pen/wQoWXP
– Vignesh Nayak
Nov 12 at 12:04
|
show 6 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51930286%2fremove-hide-the-item-from-the-ng-option-if-the-item-is-selected-by-another-selec%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The above code does the job. I assume your question is, after removing all elements from $scope.data you don't want the user to access that dropdown which shows 'select', right?
All you need to do is disable the <select> tag when the $scope.data array gets empty.
The Code is illustrated bellow -
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) !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>Hope That's what you asked for..
Cheers!
~ NiKhIL
answered Aug 20 at 13:33
Nikhil Zurunge
2177
if i am selecting an item from <select> tag then the item must be not available for any another <select> tag inside ng-repeat for e.g if i am selecting "alpha" then "alpha" will be not available for next <select> tag inside ng-repeat. Hope that make some sense!!!
– Vignesh Nayak
Aug 20 at 13:52
Thanks for the replay.
– Vignesh Nayak
Aug 20 at 13:53
Yea, If you select 'alpha' from one <select> tag , its not visible in another <select> tag , its already in your code
– Nikhil Zurunge
Aug 20 at 14:05
Yes, however when an item is selected, the <select> tag set's to select
– Vignesh Nayak
Aug 21 at 5:24
1
codepen.io/anon/pen/wQoWXP
– Vignesh Nayak
Nov 12 at 12:04
|
show 6 more comments
0
The above code does the job. I assume your question is, after removing all elements from $scope.data you don't want the user to access that dropdown which shows 'select', right?
All you need to do is disable the <select> tag when the $scope.data array gets empty.
The Code is illustrated bellow -
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) !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>Hope That's what you asked for..
Cheers!
~ NiKhIL
answered Aug 20 at 13:33
Nikhil Zurunge
2177
if i am selecting an item from <select> tag then the item must be not available for any another <select> tag inside ng-repeat for e.g if i am selecting "alpha" then "alpha" will be not available for next <select> tag inside ng-repeat. Hope that make some sense!!!
– Vignesh Nayak
Aug 20 at 13:52
Thanks for the replay.
– Vignesh Nayak
Aug 20 at 13:53
Yea, If you select 'alpha' from one <select> tag , its not visible in another <select> tag , its already in your code
– Nikhil Zurunge
Aug 20 at 14:05
Yes, however when an item is selected, the <select> tag set's to select
– Vignesh Nayak
Aug 21 at 5:24
1
codepen.io/anon/pen/wQoWXP
– Vignesh Nayak
Nov 12 at 12:04
|
show 6 more comments
0
0
0
The above code does the job. I assume your question is, after removing all elements from $scope.data you don't want the user to access that dropdown which shows 'select', right?
All you need to do is disable the <select> tag when the $scope.data array gets empty.
The Code is illustrated bellow -
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) !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>Hope That's what you asked for..
Cheers!
~ NiKhIL
answered Aug 20 at 13:33
Nikhil Zurunge
2177
The above code does the job. I assume your question is, after removing all elements from $scope.data you don't want the user to access that dropdown which shows 'select', right?
All you need to do is disable the <select> tag when the $scope.data array gets empty.
The Code is illustrated bellow -
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) !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>Hope That's what you asked for..
Cheers!
~ NiKhIL
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) !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>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) !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>answered Aug 20 at 13:33
Nikhil Zurunge
2177
answered Aug 20 at 13:33
Nikhil Zurunge
2177
answered Aug 20 at 13:33
Nikhil Zurunge
2177
answered Aug 20 at 13:33
Nikhil Zurunge
2177
2177
if i am selecting an item from <select> tag then the item must be not available for any another <select> tag inside ng-repeat for e.g if i am selecting "alpha" then "alpha" will be not available for next <select> tag inside ng-repeat. Hope that make some sense!!!
– Vignesh Nayak
Aug 20 at 13:52
Thanks for the replay.
– Vignesh Nayak
Aug 20 at 13:53
Yea, If you select 'alpha' from one <select> tag , its not visible in another <select> tag , its already in your code
– Nikhil Zurunge
Aug 20 at 14:05
Yes, however when an item is selected, the <select> tag set's to select
– Vignesh Nayak
Aug 21 at 5:24
1
codepen.io/anon/pen/wQoWXP
– Vignesh Nayak
Nov 12 at 12:04
|
show 6 more comments
if i am selecting an item from <select> tag then the item must be not available for any another <select> tag inside ng-repeat for e.g if i am selecting "alpha" then "alpha" will be not available for next <select> tag inside ng-repeat. Hope that make some sense!!!
– Vignesh Nayak
Aug 20 at 13:52
Thanks for the replay.
– Vignesh Nayak
Aug 20 at 13:53
Yea, If you select 'alpha' from one <select> tag , its not visible in another <select> tag , its already in your code
– Nikhil Zurunge
Aug 20 at 14:05
Yes, however when an item is selected, the <select> tag set's to select
– Vignesh Nayak
Aug 21 at 5:24
1
codepen.io/anon/pen/wQoWXP
– Vignesh Nayak
Nov 12 at 12:04
if i am selecting an item from <select> tag then the item must be not available for any another <select> tag inside ng-repeat for e.g if i am selecting "alpha" then "alpha" will be not available for next <select> tag inside ng-repeat. Hope that make some sense!!!
– Vignesh Nayak
Aug 20 at 13:52
if i am selecting an item from <select> tag then the item must be not available for any another <select> tag inside ng-repeat for e.g if i am selecting "alpha" then "alpha" will be not available for next <select> tag inside ng-repeat. Hope that make some sense!!!
– Vignesh Nayak
Aug 20 at 13:52
Thanks for the replay.
– Vignesh Nayak
Aug 20 at 13:53
Thanks for the replay.
– Vignesh Nayak
Aug 20 at 13:53
Yea, If you select 'alpha' from one <select> tag , its not visible in another <select> tag , its already in your code
– Nikhil Zurunge
Aug 20 at 14:05
Yea, If you select 'alpha' from one <select> tag , its not visible in another <select> tag , its already in your code
– Nikhil Zurunge
Aug 20 at 14:05
Yes, however when an item is selected, the <select> tag set's to select
– Vignesh Nayak
Aug 21 at 5:24
Yes, however when an item is selected, the <select> tag set's to select
– Vignesh Nayak
Aug 21 at 5:24
1
1
codepen.io/anon/pen/wQoWXP
– Vignesh Nayak
Nov 12 at 12:04
codepen.io/anon/pen/wQoWXP
– Vignesh Nayak
Nov 12 at 12:04
|
show 6 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51930286%2fremove-hide-the-item-from-the-ng-option-if-the-item-is-selected-by-another-selec%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
