如何在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：'！' + 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>

Answer 2

你可以嘗試以下，使用期權來代替：

希望它可以幫助=）

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>

Answer 3

試試這個，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 4

爲什麼要刪除從下拉式選單，選擇的選項，你可以很容易地禁止用戶選擇值（有沒有什麼特別的原因？），我會保持它在下拉列表但選項將被禁用。

標記

<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