CODEWITHSUNDEEP
angularjs
Chinmay235
Chinmay235

Reputation: 3414

How to remove dynamically created dropdown option in AngularJS?

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.

Upvotes: 0

Views: 3156

Answers (4)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

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

Upvotes: 1

Devidas Kadam
Devidas Kadam

Reputation: 944

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>

Upvotes: 1

Gustavo Gabriel
Gustavo Gabriel

Reputation: 1296

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>

Upvotes: 0

Valery Kozlov
Valery Kozlov

Reputation: 1577

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>

Upvotes: 1

Related Questions