How to remove dynamically created dropdown option in AngularJS?

Question

I have posted my code. I want to remove Kanhu from my options.

See the working example.

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

function myCtrl ($scope) {
   $scope.userProfiles = [
     {id: 10, name: 'Chinmay'},
     {id: 27, name: 'Sanjib'},
     {id: 35, name: 'Kanhu'},
     {id: 38, name: 'Pradeepta'},
     {id: 39, name: 'Debsish'},
  ];
  $scope.selectedUserProfile= $scope.userProfiles[1].id;

  $scope.existingId = 35;
 
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  Name
  <select  id="requestorSite" ng-model="selectedUserProfile" ng-options="userProfile.id as userProfile.name for userProfile in userProfiles">
  </select>
  <br/>
  </div>

Here is 5 names coming in the dropdown but I want to remove kanhu from my dropdown options. Can you please say me how to remove that?

I have tried to use filter userProfile.id as userProfile.name for userProfile in userProfiles | filter:{id: !existingId} this one not working.

try this ans : stackoverflow.com/questions/24761281/…

Pawan B
– Pawan B

2016-09-16 12:30:11 +00:00
Commented Sep 16, 2016 at 12:30 — Pawan B
– Pawan B, Commented Sep 16, 2016 at 12:30

Valery Kozlov · Accepted Answer · 2016-09-16 12:20:40Z

1

Use | filter: {id: '!' + existingId}

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

function myCtrl ($scope) {
   $scope.userProfiles = [
     {id: 10, name: 'Chinmay'},
     {id: 27, name: 'Sanjib'},
     {id: 35, name: 'Kanhu'},
     {id: 38, name: 'Pradeepta'},
     {id: 39, name: 'Debsish'},
  ];
  $scope.selectedUserProfile= $scope.userProfiles[1].id;

  $scope.existingId = 35;
 
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  Name
  <select  id="requestorSite" ng-model="selectedUserProfile" ng-options="userProfile.id as userProfile.name for userProfile in userProfiles | filter: {id: '!' + existingId}">
  </select>
  <br/>
  </div>

answered Sep 16, 2016 at 12:20

Valery Kozlov

1,5772 gold badges11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Devidas Kadam · Accepted Answer · 2016-09-16 12:25:25Z

1

try this, Here is working fiddle

  <div ng-app="myApp" ng-controller="myCtrl">
Name
  <select  id="requestorSite" ng-model="selectedUserProfile" ng-options="userProfile.id as userProfile.name for userProfile in userProfiles | filter:'!Kanhu'">
</select>
<br/>
</div>

answered Sep 16, 2016 at 12:25

Devidas Kadam

9549 silver badges19 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:27:26Z

1

Why you want to remove that selected option from dropdown, you can easily disallow user to select that value(is there any specific reason?), I'll keep it in dropdown but that option will be in disable.

Markup

<select id="requestorSite" 
  ng-model="selectedUserProfile" 
  ng-options="userProfile.id as userProfile.name disable when (userProfile.name == 'Kanhu') for userProfile in userProfiles">
</select>

Plunkr in action here

Similar answer

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Sep 16, 2016 at 12:31

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

Chinmay235 Over a year ago

Thank you for answering. How to remove that element instead of disable?

Pankaj Parkar Over a year ago

@Chinu just the way other answer already did! I just suggested what I felt efficient..

Gustavo Gabriel · Accepted Answer · 2016-09-16 12:21:03Z

You can try the following, using options instead:

Hope it helps =)

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

function myCtrl ($scope) {
   $scope.userProfiles = [
     {id: 10, name: 'Chinmay'},
     {id: 27, name: 'Sanjib'},
     {id: 35, name: 'Kanhu'},
     {id: 38, name: 'Pradeepta'},
     {id: 39, name: 'Debsish'},
  ];
  $scope.selectedUserProfile= $scope.userProfiles[1].id;

  $scope.existingId = 35;
 
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  Name
      <select id="requestorSite" ng-model="selectedUserProfile">
  <option ng-hide="userProfile.id == existingId" value="{{userProfile.id}}" ng-repeat="userProfile in userProfiles">{{userProfile.name}}</option>
  </select>
  <br/>
  </div>

Collectives™ on Stack Overflow

How to remove dynamically created dropdown option in AngularJS?

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related