如何删除 AngularJS 中动态创建的下拉选项？

Question

我已经发布了我的代码。我想从我的选项中删除Kanhu。

查看工作示例。

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>

下拉列表中有 5 个名称，但我想从下拉选项中删除 kanhu。你能告诉我如何删除它吗？

我已尝试使用过滤器userProfile.id as userProfile.name for userProfile in userProfiles | filter:{id: !existingId} 这一个不起作用。

Answer 1

使用 |过滤器：{id：'！' + 现有 ID}

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>

Answer 2

试试这个，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>

Answer 3

为什么要从下拉列表中删除该选定选项，您可以轻松禁止用户选择该值（有什么具体原因吗？），我将其保留在下拉列表中，但该选项将处于禁用状态。

标记

<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这里

类似answer

Answer 4

您可以尝试以下方法，改用选项：

希望对你有帮助 =)

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>