Chinu Chinu - 2 months ago 11
AngularJS Question

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.

Answer

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>