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 : http://stackoverflow.com/questions/24761281/hiding-an-option-in-ng-options — bob, Sep 16 '16 at 12:30

score 1 · Accepted Answer · answered Sep 16 '16 at 12:20

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>

score 1 · Answer 2 · answered Sep 16 '16 at 12:25

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>

score 1 · Answer 3 · edited May 23 '17 at 10:27

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 '17 at 10:27

Community

1
1

answered Sep 16 '16 at 12:31

Pankaj Parkar

134,766
23
234
299

Thank you for answering. How to remove that element instead of disable? – Chinmay235 Sep 16 '16 at 12:43
1

@Chinu just the way other answer already did! I just suggested what I felt efficient.. – Pankaj Parkar Sep 16 '16 at 12:48

score 0 · Answer 4 · answered Sep 16 '16 at 12:21

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>

How to remove dynamically created dropdown option in AngularJS?

4 Answers4